Skip to content
A CSS/JS mixin for styling social media links.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshots
.gitignore
README.md
flip_cover.js
flip_cover.scss

README.md

flipCover

FlipCover is a CSS/JS mixin for styling social media links.

all_buttons

Demo

See on Codepen

API

.flipCover(css [, options])

Contents

  • .flipCover(css)
  • .flipCover(css, jsObject)
  • .flipCover(jsObject)

Options Description Default
css CSS class of your choice required
text text inside the button css
url link for text N/A
width width of button length of text
height height of button 40px (number less 40px will be ignored)

Usage

Download flip_cover.css and flip_cover.js and place them in your assets.

Examples

In your HTML file:

<div class="flip-cover-dribbble"></div>

In your JS file:

// Require file
//= require flip_cover

// Call function
flipCover({"dribbble", { url: "https://dribbble.com/vveleva", text: "vveleva" });

// you can also pass everything as an object
flipCover({
  css: "dribbble",
  url: "https://dribbble.com/vveleva",
  text: "vveleva",
  width: "80px"
});

In your CSS file:

// Import mixin
@import "flip_cover.scss"

// Call mixin
@include flip-cover("dribbble", "d", #FC1786);
Preview:

dribbble


### Example of an email without a link

HTML:

<div class="flip-cover-email"></div>

JS:

flipCover("email", { text: "user@example.com" });

CSS:

@include flip-cover("email", "example", #F80);
Preview:

email

You can’t perform that action at this time.