this is very cute button for your blogskin and more cute website :)
A Pen by agil triono on CodePen.
<a href="#" class="classname">download</a> |
.classname { | |
-moz-box-shadow:inset 0px 1px 23px -1px #ffffff; | |
-webkit-box-shadow:inset 0px 1px 23px -1px #ffffff; | |
box-shadow:inset 0px 1px 23px -1px #ffffff; | |
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffdeff), color-stop(1, #ffe3ff) ); | |
background:-moz-linear-gradient( center top, #ffdeff 5%, #ffe3ff 100% ); | |
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdeff', endColorstr='#ffe3ff'); | |
background-color:#ffdeff; | |
-webkit-border-top-left-radius:6px; | |
-moz-border-radius-topleft:6px; | |
border-top-left-radius:6px; | |
-webkit-border-top-right-radius:6px; | |
-moz-border-radius-topright:6px; | |
border-top-right-radius:6px; | |
-webkit-border-bottom-right-radius:6px; | |
-moz-border-radius-bottomright:6px; | |
border-bottom-right-radius:6px; | |
-webkit-border-bottom-left-radius:6px; | |
-moz-border-radius-bottomleft:6px; | |
border-bottom-left-radius:6px; | |
text-indent:0; | |
border:1px solid #ffedff; | |
display:inline-block; | |
color:#fcf2fc; | |
font-family:arial; | |
font-size:15px; | |
font-weight:bold; | |
font-style:normal; | |
height:50px; | |
line-height:50px; | |
width:100px; | |
text-decoration:none; | |
text-align:center; | |
text-shadow:1px 1px 0px #fcc0fc; | |
} | |
.classname:hover { | |
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffe3ff), color-stop(1, #ffdeff) ); | |
background:-moz-linear-gradient( center top, #ffe3ff 5%, #ffdeff 100% ); | |
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe3ff', endColorstr='#ffdeff'); | |
background-color:#ffe3ff; | |
}.classname:active { | |
position:relative; | |
top:1px; | |
} |