wordpress Upgrade 按钮样式学习

254月

wordpress Upgrade 按钮样式学习

样式如下：

html代码：

<span class="buy-button-wrapper">
<a href="http://go.siteorigin.com/snapshot-premium" class="buy-button">
<span>Buy Upgrade</span><em>$9</em>
</a>
</span>

css代码：

/* Buy Button */

.buy-button-wrapper {
background: #F0F0F0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: inline-block;
padding: 6px;
}

.buy-button {
background: #cbe385;
background: -moz-linear-gradient(top, #cbe385 0%, #9ccc54 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbe385), color-stop(100%,#9ccc54));
background: -webkit-linear-gradient(top, #cbe385 0%,#9ccc54 100%);
background: -o-linear-gradient(top, #cbe385 0%,#9ccc54 100%);
background: -ms-linear-gradient(top, #cbe385 0%,#9ccc54 100%);
background: linear-gradient(to bottom, #cbe385 0%,#9ccc54 100%);
border: 1px solid black;
border: 1px solid #83a44d;
border-radius: 4px;
border-top-color: #a6b864;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 3px rgba(0,0,0,0.2);
display: inline-block;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbe385', endColorstr='#9ccc54',GradientType=0 );
font: 20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-weight: 500;
line-height: 1em;
text-decoration: none;
}

.buy-button:hover {
background: #cee688;
background: -moz-linear-gradient(top, #cee688 0%, #a3d25a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cee688), color-stop(100%,#a3d25a));
background: -webkit-linear-gradient(top, #cee688 0%,#a3d25a 100%);
background: -o-linear-gradient(top, #cee688 0%,#a3d25a 100%);
background: -ms-linear-gradient(top, #cee688 0%,#a3d25a 100%);
background: linear-gradient(to bottom, #cee688 0%,#a3d25a 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 3px rgba(0,0,0,0.3);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cee688', endColorstr='#a3d25a',GradientType=0 );
}

.buy-button:active {
background: #b3d46c;
background: -moz-linear-gradient(top, #b3d46c 0%, #bbd975 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3d46c), color-stop(100%,#bbd975));
background: -webkit-linear-gradient(top, #b3d46c 0%,#bbd975 100%);
background: -o-linear-gradient(top, #b3d46c 0%,#bbd975 100%);
background: -ms-linear-gradient(top, #b3d46c 0%,#bbd975 100%);
background: linear-gradient(to bottom, #b3d46c 0%,#bbd975 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 1px rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3d46c', endColorstr='#bbd975',GradientType=0 );
margin-bottom: -1px;
margin-top: 1px;
outline: none;
}

.buy-button span {
border-right: 1px solid #98b55b;
color: inherit;
color: #4f6920;
display: inline-block;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-weight: bold;
padding: 12px 20px 12px 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.575);
}

.buy-button:hover span {
text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}

.buy-button em {
background: rgba(255,255,255,0.1);
border-left: 1px solid rgba(255,255,255,0.275);
color: #5b752c;
display: inline-block;
font-style: italic;
font-weight: bold;
padding: 12px 20px 12px 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.575);
}

分享到：