<h1>Button Effects / Only CSS3</h1>
<h2>by <a href="https://twitter.com/Jeyffrey" target="_blank">@jeyffrey</a></h2>

<!-- MENU BUTTON -->
<a href="#" title="Cl*ck me I'm famous" id="menu">
    <div class="barre"></div>
</a>

<!-- TOOLTIP BUTTON -->
<p class="source">Inspired by <a href="https://codepen.io/Araujoo/full/lpDjC" target="_blank">Allan Araujo Pen</a></p>
<a id="tooltip" href="#" title="Download">
    <img src="http://flaticons.net/gd/makefg.php?i=icons/Mobile%20Application/Download.png&r=255&g=255&b=255">
</a>

<!-- APPLY BUTTON -->
<p class="source">Inspired by <a href="http://www.blank.io/" target="_blank">Blank.io</a></p>
<div id="apply">
    <a href="#" title="Cl*ck me I'm famous">Apply</a>
    <div class="fake-border left"></div>
    <div class="fake-border top"></div>
    <div class="fake-border right"></div>
    <div class="fake-border bottom"></div>
</div>

<!-- SCALE BUTTON -->
<p class="source">-</p>
<a id="scale" href="#">Scale</a>

<!-- CONTENT SWITCH BUTTON -->
<p class="source">Inspired by <a href="https://www.brahma.com.br/" target="_blank">Brahma.br</a></p>
<a id="switch" href="#"><span title="Switch">Switch</span></a>

<!-- BG COLOR BUTTON -->
<p class="source">Inspired by <a href="http://www.ultranoir.com/" target="_blank">Ultranoir.com</a></p>
<div id="background">
    <a href="#">
        Background
        <div><span>Back &nbsp;&nbsp; Face</span></div>
    </a>
</div>

<!-- CUBIC BUTTON -->
<p class="source">Inspired by <a href="http://www.akaru.fr/" target="_blank">Akaru.fr</a></p>
<a id="cubic" href="#">
    <span title="Youhou">Cubic</span>
</a>

<!-- EVALUATION BUTTONS -->
<p class="source">-</p>
<a id="heart" href="#">&#9829;</a>

body {
    text-align: center;
    font-family: Tahoma;
    line-height: 1.5;
}

h1 {
    font-size: 20px;
    font-weight: 400;
    margin: 15px 0;
}

h2 {
    font-weight: normal;
    font-size: 16px;
    margin-bottom: 40px;
    display: block;
}

a {
    text-decoration: none;
    display: inline-block;
    color: #333;
}

.source {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dotted #aaa;
}

h2 a, .source a {
    text-decoration: underline;
    color: #417378;
}

p {
  margin-bottom: 15px;
}

/* * * * * * * * *
MENU BUTTON
* * * * * * * * */
#menu {
    height: 32px;
    width: 40px;
    position: relative;
    display: block;
    margin: auto;
}

.barre, .barre:before, .barre:after {
    height: 6px;
    width: 40px;
    border-radius: 5px;
    background: #F27983;
    position: absolute;
    top: 13px;
    left: 0;
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
    transition: .1s linear all;
}

.barre:before {
    content: "";
    top: -13px;
}

.barre:after {
    content: "";
    top: 13px;
}

#menu:hover .barre {
    background: transparent;
}

#menu:hover .barre:before {
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#menu:hover .barre:after {
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 1;
}

/* * * * * * * * *
TOOLTIP BUTTON
* * * * * * * * */
#tooltip {
    background: #6087B8;
    padding: 15px;
    border-radius: 30px;
    position: relative;
}

#tooltip img {
    width: 20px;
    height: 20px;
    display: block;
}

#tooltip:before {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 2px;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #aaa;
}

#tooltip:after {
    content: attr(title);
    background: #fff;
    font-size: 80%;
    color: black;
    position: absolute;
    width: 80px;
    top: 100%;
    left: 50%;
    margin-top: 7px;
    margin-left: -42px;
    padding: 2px;
    border: 1px solid #888;
    border-radius: 2px;
}

#tooltip:after, #tooltip:before {
    display: none;
}

#tooltip:hover:after, #tooltip:hover:before {
    display: block;
}

/* * * * * * * * *
APPLY BUTTON
* * * * * * * * */
#apply {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

#apply a {
    border: 3px solid #79BD8F;
    padding: 10px 20px;
    margin: 5px;
}

#apply .fake-border {
    background: #BEEB9F;
    position: absolute;
    transition: .15s all ease;
}

#apply .left, #apply .right {
    width: 3px;
    height: 100%;
}

#apply .top, #apply .bottom {
    height: 3px;
    width: 100%;
}

#apply .left {
    top: 100%;
    transition-delay: 0ms;
}

#apply .right {
    top: -100%;
    right: 0%;
    transition-delay: 300ms;
}

#apply:hover .left, #apply:hover .right {
    top: 0%;
}

#apply .top {
    left: -100%;
    top: 0;
    transition-delay: 150ms;
}

#apply .bottom {
    bottom: 0%;
    left: 100%;
    transition-delay: 450ms;
}

#apply:hover .top, #apply:hover .bottom {
    left: 0%;
}

/* * * * * * * * *
SCALE BUTTON
* * * * * * * * */
#scale {
    color: #fff;
    text-shadow: 2px 2px #962D3E;
    font-size: 200%;
    font-weight: bold;
    letter-spacing: 2px;
    border: 1px solid #962D3E;
    text-transform: uppercase;
    padding: 5px 10px;
    background: url('https://fortheloveofgeorge.com.au/wp-content/uploads/2013/07/FallenLeavesPattern_vCS4_preview.png') no-repeat;
    background-size: 100% auto;
    background-position: center;
    transition: .3s all ease-in-out;
}

#scale:hover {
    background-size: 150% auto;
}

/* * * * * * * * *
CONTENT SWITCH BUTTON
* * * * * * * * */
#switch {
    border: 1px solid #F77A52;
    color: #F77A52;
    height: 40px;
    line-height: 40px;
    padding: 0px 40px 0px 15px;
    position: relative;
    overflow: hidden;
    transition: .4s all ease;
}

#switch:before {
    content: ">";
    position: absolute;
    right: 10px;
}

#switch span {
    position: relative;
    top: 0px;
    transition: .4s all ease;
}

#switch span:after {
    content: attr(title);
    display: block;
    opacity: 0;
    transition: .4s all ease;
    color: #A49A87;
}

#switch:hover {
    border-color: #A49A87;
}

#switch:hover:before {
    color: #A49A87;
}

#switch:hover span {
    top: -40px;
}

#switch:hover span:after {
    opacity: 1;
}

/* * * * * * * * *
BG BUTTON  BUTTON
* * * * * * * * */
#background {
    display: inline-block;
    background: #6087B8;
}

#background a {
    display: block;
    padding: 10px 20px;
    color: #FFD583;
    position: relative;
    z-index: 2;
}

#background div {
    position: absolute;
    display: block;
    width: 0%;
    height: 100%;
    top:0;
    left: 0;
    background: #FFD583;
    z-index: 1;
    overflow: hidden;
    transition: .8s all ease;
}

#background:hover div {
    width: 100%;
}

#background span {
    position: absolute;
    color: #6087B8;
    width: 123px;
    top: 0;
    left: 0;
    display: block;
    text-align: center;
    height: 100%;
    padding: 10px 0;
}

/* * * * * * * * *
CUBIC BUTTON
* * * * * * * * */
#cubic {
    color: white;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    padding: 0 20px;
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -ms-perspective: 300px;
    -o-perspective: 300px;
    perspective: 280px;
}

#cubic span {
    display: block;
    background: black;
    padding: 20px 50px;
    top: 0;
    transition: .4s all ease;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    -ms-transform-origin:50% 0;
    -o-transform-origin:50% 0;
    transform-origin:50% 0;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
}

#cubic:hover span {
    background: #555;
    -webkit-transform: translate3d(0px,0px,-60px) rotateX(90deg);
    -moz-transform: translate3d(0px,0px,-60px) rotateX(90deg);
    -ms-transform: translate3d(0px,0px,-60px) rotateX(90deg);
    -o-transform: translate3d(0px,0px,-60px) rotateX(90deg);
    transform: translate3d(0px,0px,-60px) rotateX(90deg);
}

#cubic span:after {
    content: attr(title);
    display: block;
    width: 100%;
    padding: 20px 0px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    transition: .8s all ease;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: translate3d(0px, 100%,0) rotateX(-90deg);
    -moz-transform: translate3d(0px, 100%,0) rotateX(-90deg);
    -ms-transform: translate3d(0px, 100%,0) rotateX(-90deg);
    -o-transform: translate3d(0px, 100%,0) rotateX(-90deg);
    transform: translate3d(0px, 100%,0) rotateX(-90deg);
}

#cubic:hover span:after {
    background: #FF5E9F;
}

/* * * * * * * * *
EVALUATION BUTTONS
* * * * * * * * */
#heart {
    font-size: 40px;
    color: #F27983;
    position: relative;
}

#heart:after {
    content:"♥";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: 0s all ease;
}

#heart:hover:after {
    transform: scale(2);
    -webkit-transform: scale(2);
    opacity:0;
    transition: .8s all ease;
}