Pure CSS3 Buttons

Rating: 5
Comments: 1

Pure CSS3 Buttons

24 Jul 2011 20:49

These are some CSS3 Buttons, each button comes with a Regular state, Hover state, and Active state.

/* Forrest Green Button */
 
.yourclassnamehere a {
    float: left;
    margin-right: 15px !important;
    margin: 0;
    padding: 5px 20px 6px 20px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    background: #335D30;
    background: -moz-linear-gradient(top,#4A7746 0,#335D30 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#4A7746),color-stop(100%,#335D30));
    filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#4A7746',endColorstr='#335D30',GradientType=0);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    border: none;
    color: #e3e3e3;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    text-decoration: none;
    letter-spacing: 1px;
    position: relative;
}
.yourclassnamehere a:hover {
    background: #336B30;
    background: -moz-linear-gradient(top,#4A8546 0,#336B30 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#4A8546),color-stop(100%,#336B30));
    filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8546',endColorstr='#336B30',GradientType=0);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    color: #f5f5f5;
}
.yourclassnamehere a:active {
    background: #335D30;
    background: -moz-linear-gradient(top,#335D30 0,#4A7746 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#335D30),color-stop(100%,#4A7746));
    filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#335D30',endColorstr='#4A7746',GradientType=0);
    -webkit-box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50);
    box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50);
    color: #e3e3e3;
    border: none;
}
 
/* Pink Button */
 
.your2ndclassnamehere a {
    float: left; 
    margin-right: 15px !important; /* For Testing Purposes */
    margin: 0;
    padding: 5px 20px 6px 20px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    background: #ea4c89;
    background: -moz-linear-gradient(top,#e989ae 0,#ea4c89 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#e989ae),color-stop(100%,#ea4c89));
    filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#e989ae',endColorstr='#ea4c89',GradientType=0);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    border: none;
    color: #e3e3e3;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    text-decoration: none;
    letter-spacing: 1px;
    position: relative;
}
.your2ndclassnamehere a:hover {
    background: #ea90b3;
    background: -moz-linear-gradient(top,#ea90b3 0,#eb5891 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ea90b3),color-stop(100%,#eb5891));
    filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#ea90b3',endColorstr='#eb5891',GradientType=0);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.50), inset 0px 1px 1px rgba(255,255,255,0.35);
    color: #f5f5f5;
}
.your2ndclassnamehere a:active {
    background: #e989ae;
    background: -moz-linear-gradient(top,#ea4c89 0,#e989ae 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ea4c89),color-stop(100%,#e989ae));
    filter: rogid:DXImageTransform.Microsoft.gradient(startColorstr='#ea4c89',endColorstr='#e989ae',GradientType=0);
    -webkit-box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50);
    box-shadow: 0px 1px 6px rgba(255,255,255,0.17), inset 0px 2px 3px rgba(0,0,0,0.50);
    color: #e3e3e3;
    border: none;
}

Just change the color scheme to change the colors of the buttons. I made it very simple for everyone.

View the Demo: http://jsfiddle.net/526hz/
Original URL: http://www.icondeposit.com/code:pure-css3-buttons
License Info: Creative Commons Attribution Share-Alike 3.0

rating: +5+x

Add a New Comment
Copyright © 2011-2015 Icon Deposit - All rights Reserved