Return to Snippet

Revision: 67376
at September 14, 2014 02:13 by melaychie


Initial Code
.button.secondary {
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
    background-image: -webkit-linear-gradient( #ffefc3, #ffdf89);
    background-image: linear-gradient( #ffefc3, #ffdf89);
    color: #b68733;
    border: 1px solid #dab861;
    box-shadow: inset 0 1px 0px rgba(255, 255, 255, 0.7),inset 0 -1px 0px rgba(218, 184, 97, 0.4);
}
.button.radius {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.button.secondary {
    transition: all 2.25s;
    padding: 10px;
    text-decoration: none;
}
.background {
    background: #85c3af;
    background-image: -webkit-linear-gradient( #77af9d, #cee7df);
    background-image: linear-gradient( #77af9d, #cee7df);    
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    background-position: 36px 0px !important;
    background-size: auto 36px !important;
}

Initial URL

                                

Initial Description
for my reference only. button transition effect and box shadow for everyday use

Initial Title
css button effect

Initial Tags
button

Initial Language
CSS