flipCover

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

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:

### 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: