MusclingButtons

Buttons muscling in 3D

by Jacques Surveyer

HTML

<section style="background:yellow; text-align:center; padding-top:4px;">
     <h4>Buttons Flexing their Muscles in CSS3, hover over button to see flexing<br>
       Tip of the Hat to  <a  href="http://tympanus.net/codrops/?p=15430">Mary Lou at Codrops </a></h4>

    <section>
        <section class="color-8">
            <p class="perspective">
                <button class="btn btn-8 btn-8a">3D Button A</button>
            </p>
            <p class="perspective">
                <button class="btn btn-8 btn-8b">3D Button B</button>
            </p>
            <br />
            <p class="perspective">
                <button class="btn btn-8 btn-8c">3D Button C</button>
            </p>
            <p class="perspective">
                <button class="btn btn-8 btn-8d">3D Button D</button>
            </p>

            <span class="perspective">
                <button class="btn btn-8 btn-8e">3D Button E</button>
            </span>
            <div class="perspective">
                <button class="btn btn-8 btn-8f">3D Button F</button>
            </div>
           
        </section>

CSS

.color-8 {
    background:#4967df;
}
.perspective {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    display: inline-block;
}
.btn {
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: white;
    background: none;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-8 {
    display: block;
    background: #22bcc6;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.btn-8:active {
    background: #55b7f3;
}
/* Button 8a */
 .btn-8a:after {
    width: 100%;
    height: 40%;
    left: 0;
    top: -40%;
    background: #49a7df;
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotateX(90deg);
    -moz-transform-origin: 0% 100%;
    -moz-transform: rotateX(90deg);
    transform-origin: 0% 100%;
    transform: rotateX(90deg);
}
.btn-8a:hover {
    -webkit-transform: rotateX(-25deg);
    -moz-transform: rotateX(-25deg);
    -ms-transform: rotateX(-25deg);
    transform: rotateX(-25deg);
}
/* Button 8b */
 .btn-8b:after {
    width: 100%;
    height: 40%;
    left: 0;
    top: 100%;
    background: #49a7df;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(-90deg);
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(-90deg);
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(-90deg);
    transform-origin: 0% 0%;
    transform: rotateX(-90deg);
}
.btn-8b:hover {
    -webkit-transform: rotateX(35deg);
    -moz-transform: rotateX(35deg);
    -ms-transform: rotateX(35deg);
    transform: rotateX(35deg);
}
.btn-8c:after {
    width: 20%;
    height: 100%;
    left: -20%;
    top: 0;
    background: #49a7df;
    -webkit-transform-origin: 100%...