Fly CSS3 Buttons

Great example of what you are able to do as CSS3 becomes more standard. Notice the great lack of images (except for the nav arrow, which could be replaced with something like a raquo; or importing a font library of icons). The key factors in this effect are the using the multi-step box shadows to achieve multiple color and size effects that give us both the upper border as well as the 'perspective' base AND the shadow all in one call. Normal State: Active (Pressed) State:
.test-button {
    background-color: #4A7F06;
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: white;
    position: relative;
    padding: 10px 20px;
    padding-right: 50px;
    background-image: linear-gradient(bottom, #3E332E 0%, #65564E 100%);
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #899e84, 0px 5px 0px 0px #1b2e02, 0px 10px 5px #999;
}

.test-button:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
    box-shadow: inset 0px 1px 0px #899e84, 0px 2px 0px 0px #1b2e02, 0px 5px 3px #999;
}

.test-button::before {
    background-color: #213c0f;
    background-image:url(/sites/all/themes/datasphere/images/right_arrow.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-9px;
    border-radius: 50%;
    box-shadow: inset 0px 1px 0px #13190f, 0px 1px 0px #6e8266;
}

.test-button:active::before {
    top:50%;
    margin-top:-12px;
    box-shadow: inset 0px 1px 0px #6e8266, 0px 3px 0px #12190f, 0px 6px 3px #2f3829;
}
Small dog web development studio
View All Our Posts

Web application developers in western Washington, creating user centric web solutions for businesses of all shapes and sizes.

Our projects include ecommerce, event organization, user driven web applications and more.


Small Dog Studios, LLC. Small Dog Studios News