CSS CSS3和RGBA的按钮

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS CSS3和RGBA的按钮相关的知识，希望对你有一定的参考价值。

/*ESTRUCTURA HTML*/
/*
&lt;a class=&quot;large awesome&quot;&gt;Super Awesome Button Â»&lt;/a&gt;
*/

.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;}

以上是关于CSS CSS3和RGBA的按钮的主要内容，如果未能解决你的问题，请参考以下文章

CSS CSS3 - Fancy Nice酷Web2.0 ZURB超级棒的CSS3和RGBA按钮