flipCover

Demo





Usage

Download flip_cover.scss and flip_cover.js and move them in your project assets.



Download JS Download SCSS

Examples

Basic Example

In your HTML file:


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


In your JS file:


    //= require flip_cover

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

dribbble