A Pen by agil triono.

CSS-BUTTON.markdown

CSS BUTTON

this is very cute button for your blogskin and more cute website :)

A Pen by agil triono on CodePen.

License.

index.html

<a href="#" class="classname">download</a>

style.scss

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