<html>
<head>
<style>
.sc-button {
float: left;
text-indent: 18px;
-moz-box-sizing: border-box;
-moz-user-select: none;
background-color: #FCFCFC;
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(235, 235, 235, 0.3) 60%, rgba(225, 225, 225, 0.6));
border: 1px solid #E5E5E5;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 1px 0 rgba(255, 255, 255, 0.7) inset, -1px 0 0 rgba(255, 255, 255, 0.7) inset, 0 -1px 0 rgba(255, 255, 255, 0.5) inset, 1px 0 0 rgba(255, 255, 255, 0.7) inset;
color: #333333;
cursor: pointer;
display: inline-block;
font-family: "Interstate","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
font-size: 14px;
font-weight: 100;
height: 26px;
line-height: 20px;
margin: 0;
overflow: hidden;
padding: 2px 10px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
vertical-align: baseline;
white-space: nowrap;
min-width: 51px;
}
.sc-button:before {
background-position: center center;
background-repeat: no-repeat;
content: "";
display: block;
height: 20px;
left: 4px;
position: absolute;
top: 3px;
width: 20px;
}
.sc-button:hover, .sc-button:focus, .sc-button-focus {
background-color: #F9F9F9;
border-color: #E5E5E5 #CCCCCC #CCCCCC;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 0 #FFFFFF inset, -1px 0 0 #F8F8F8 inset, 0 -1px 0 rgba(248, 248, 248, 0.5) inset, 1px 0 0 #F8F8F8 inset;
color: #333333;
outline: 0 none;
text-shadow: -1px -1px 0 #FCFCFC, 1px -1px 0 #FCFCFC, -1px 1px 0 #FCFCFC, 1px 1px 0 #FFFFFF;
}
.sc-button-like:before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAiklEQVQoz2NgGFLAOMH4PxDeNzYAsg2ANIiXgKlMASwBhKafjB2AGMozVkBT6DkBLoUCPSegKSw/gF1h0nk0hWsXYFe4Yzuawv8OM7Eom/n/vwOGd/43NKApa/j/vwFrAP2f34CqbD7OsPw/vxeqrBefMrDS/k1AZZv+/+8nGEP/E/7//5/AMJwBACVhhWwJehwSAAAAAElFTkSuQmCC");
}
</style>
</head>
<body>
<a class="sc-button sc-button-like" href="#">Download</a>
</body>
</html>
No comments:
Post a Comment