Return to Snippet

Revision: 50760
at September 1, 2011 21:42 by distribuida


Initial Code
/*ESTRUCTURA HTML*/
/*
<a class="large awesome">Super Awesome Button »</a>
*/

.awesome{
    background: #222 url(/images/alert-overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    position: relative;
    cursor: pointer;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
}

/* Sizes ---------- */
.small.awesome {font-size: 11px;}
.medium.awesome {font-size: 13px;}
.large.awesome {font-size: 14px; padding: 8px 14px 9px;}
 
/* Colors ---------- */
.blue.awesome {background-color: #2daebf;}
.red.awesome {background-color: #e33100;}
.magenta.awesome {background-color: #a9014b;}
.orange.awesome {background-color: #ff5c00;}
.yellow.awesome {background-color: #ffb515;}

Initial URL
http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Initial Description


Initial Title
Buttons with CSS3 and RGBA

Initial Tags


Initial Language
CSS