Skip to content

CSS3 to make pretty buttons

Awesomebutton

This is taken from here. The CSS:

.send {
        border: 1px solid #E2A812;
        border-radius: 4px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
        color: white;
        cursor: pointer;
        display: inline-block;
        font-size: 36px;
        font-weight: bold;
        width: 100%;
        height: 100px;
        line-height: 11px;
        outline: 0 none;
        padding: 5px 9px 6px;
        text-align: center;
        text-decoration: none;
        vertical-align: baseline;
        background:-webkit-gradient(linear, left top, left bottom, from(#E3CC76), to(#E6B537));
        background:-moz-linear-gradient(center top , #E3CC76, #E6B537);
        color: #68480C;
/** text-shadow is especially cool **/
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
        letter-spacing: -1px;
    }

/** and on active states, mess with the gradient. also consider for :hover as well **//
    .send:active {
        background:-webkit-gradient(linear, left top, left bottom, from(#E6B537), to(#E3CC76));
        background:-moz-linear-gradient(center top , #E6B537, #E3CC76);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.