Press-able CSS Button

Supplemental 236 views
0
0 Flares 0 Flares ×
.btn-big-red {
	background-color: #C63702;
	background-image: linear-gradient(167deg, rgba(255,255,255, 0.1) 50%, rgba(0,0,0, 0) 55%), linear-gradient(top, rgba(255,255,255, 0.15), rgba(0,0,0, 0));
	border-radius: 6px;
	box-shadow: 0 0 0 1px #C63702 inset, 0 0 0 2px rgba(255,255,255, 0.15) inset, 0 8px 0 0 #AD3002,0 8px 0 1px rgba(0,0,0, 0.4), 0 8px 8px 1px rgba(0,0,0, 0.5);
	color: #FFF;
	display: inline-block;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-size: 22px;
	font-weight: bold;
	height: 61px;
	letter-spacing: -1px;
	line-height: 61px;
	margin: 30px 0 10px;
	position: relative;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0,0,0, 0.5);
	text-decoration: none !important;
	top: 0;
	width: 186px;
	transition:.15s;
}
.btn-big-red:hover, .btn-big-red:focus {
	background-color: #D13902;
	box-shadow: 0 0 0 1px #C63702 inset, 0 0 0 2px rgba(255,255,255, 0.15) inset, 0 10px 0 0 #AD3002, 0 10px 0 1px rgba(0,0,0, 0.4), 0 10px 8px 1px rgba(0,0,0, 0.6);
	top: -2px;
	color:#fff;
}
.btn-big-red:active {
	box-shadow: 0 0 0 1px #AD3002 inset, 0 0 0 2px rgba(255,255,255, 0.15) inset, 0 0 0 1px rgba(0,0,0, 0.4);
	transform:translate(0,10px);
	-ms-transform: translate(0,10px); 
	-webkit-transform: translate(0,10px); 
}

HTML

<a href="#" class="btn-big-red">Sign me up!</a>

Output

Press Me!

For Reference:

Nice Pressable Button

Provided by: ELM Software
Tagged with:
Posted in CSS

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×