css button

animation

by Kim Ara

HTML

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

CSS

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;
   ...