<div class="flatmetal shade" style="width: 200px; height: 150px;">
			<div style="background: url(http://webdesignledger.com/wp-content/uploads/2010/01/macro_photography_27.jpg);"></div>
</div>

<div class="bt">Услуги</div>

<div class="peachyellow">УЗНАТЬ О КРАСОТЕ</div>
*{float: left}
  .shade {}

	.shade:after {
		position: absolute;
		opacity: 0.4;
		z-index: -1;
		content: "";
		top: 105%;
		left: 30%;
		width: 60%;
		height: 2px;
		background: #000;
		border-radius: 100%;
		box-shadow: 0px 0px 5px 2px #000, 0px 0px 15px 7px #000;
		transform: rotate(5deg) ;
		-webkit-transform: rotate(5deg) ;
		-moz-transform: rotate(5deg) ;
		-o-transform: rotate(5deg) ;
		-ms-transform: rotate(5deg) ;
	}
	.shade:before {
		position: absolute;
		opacity: 0.3;
		z-index: -1;
		content: "";
		top: 105%;
		left: 10%;
		width: 60%;
		height: 5px;
		background: #000;
		border-radius: 100%;
		box-shadow: 0px 0px 5px 2px #000, 0px 0px 15px 7px #000;
		transform: rotate(-5deg) ;
		-webkit-transform: rotate(-5deg) ;
		-moz-transform: rotate(-5deg) ;
		-o-transform: rotate(-5deg) ;
		-ms-transform: rotate(-5deg) ;
	}

.flatmetal {
		position: relative;
		border-radius: 4px;
		background: rgb(251,206,136); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(251,206,136,1) 0%, rgba(143,62,17,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,206,136,1)), color-stop(100%,rgba(143,62,17,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(251,206,136,1) 0%,rgba(143,62,17,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(251,206,136,1) 0%,rgba(143,62,17,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(251,206,136,1) 0%,rgba(143,62,17,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(251,206,136,1) 0%,rgba(143,62,17,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbce88', endColorstr='#8f3e11',GradientType=0 ); /* IE6-9 */
		box-shadow: inset 0px 3px 10px 1px rgba(255,255,255,0.2), 0 -5px 10px rgba(255,255,255,0.3);
		transition:All 0.3s ease-in-out;
		-webkit-transition:All 0.3s ease-in-out;
		-moz-transition:All 0.3s ease-in-out;
		-o-transition:All 0.3s ease-in-out;
	}
	.flatmetal > div {
		position: absolute;
		top: 3%;
		left: 3%;
		width: 94%;
		height: 94%;
		border-radius: 4px;
		margin: auto;
		background-size: auto 100%;
		box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.3);
		transition:All 0.6s ease-in-out;
		-webkit-transition:All 0.6s ease-in-out;
		-moz-transition:All 0.6s ease-in-out;
		-o-transition:All 0.6s ease-in-out;
	}
	.flatmetal:hover {
		background-position: 0 150px;
	}
	.flatmetal > div:hover {
		box-shadow: inset 0px 0px 30px 5px rgba(255,255,255,0.5);
	}

.bt {
		min-width: 100px;
		margin: 0 1px 0 0;
		margin: 50px;
		list-style: none;
		display: inline-block;
		border: 0;
		outline: 0;
		font-size: 100%;
    text-align: center;
		vertical-align: baseline;
		background: rgb(251,227,190); /* Old browsers */
		background: -moz-linear-gradient(-45deg,  rgba(251,227,190,1) 0%, rgba(251,206,136,1) 45%, rgba(251,206,136,1) 55%, rgba(251,227,190,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(251,227,190,1)), color-stop(45%,rgba(251,206,136,1)), color-stop(55%,rgba(251,206,136,1)), color-stop(100%,rgba(251,227,190,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(-45deg,  rgba(251,227,190,1) 0%,rgba(251,206,136,1) 45%,rgba(251,206,136,1) 55%,rgba(251,227,190,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(-45deg,  rgba(251,227,190,1) 0%,rgba(251,206,136,1) 45%,rgba(251,206,136,1) 55%,rgba(251,227,190,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(-45deg,  rgba(251,227,190,1) 0%,rgba(251,206,136,1) 45%,rgba(251,206,136,1) 55%,rgba(251,227,190,1) 100%); /* IE10+ */
		background: linear-gradient(135deg,  rgba(251,227,190,1) 0%,rgba(251,206,136,1) 45%,rgba(251,206,136,1) 55%,rgba(251,227,190,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbe3be', endColorstr='#fbe3be',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

		background-position:0px;
		border: 1px solid;
		border-top-color: #FBE3BE;
		border-right-color: #cdc8c0;
		border-bottom-color: #bcb7b0;
		border-left-color: #f4dccb;
		-moz-box-shadow:inset 0px 0px 1px 1px #fbe3be;
		-webkit-box-shadow:inset 0px 0px 1px 1px #fbe3be;
		box-shadow:inset 0px 0px 1px 1px #fbe3be;
		padding: 5px;
		padding-left: 10px;
		padding-right: 10px;
		transition:All 0.5s ease-in-out;
		-webkit-transition:All 0.5s ease-in-out;
		-moz-transition:All 0.5s ease-in-out;
		-o-transition:All 0.5s ease-in-out;
	}
	.bt:hover {
		background-position: 170px;
		
	}

	.peachyellow {
		font-family: 'HaginCapsMediumRegular';
		font-size: 30px;
		letter-spacing: 1px;
		color: #C75312;
		width: 270px;
		padding: 10px;
		margin-top: 20px;
		margin-left: 40px;
		text-align: center;
		background: rgb(251,238,190); /* Old browsers */
		background: -moz-linear-gradient(-45deg,  rgba(251,238,190,1) 0%, rgba(251,226,136,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(251,238,190,1)), color-stop(100%,rgba(251,226,136,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(-45deg,  rgba(251,238,190,1) 0%,rgba(251,226,136,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(-45deg,  rgba(251,238,190,1) 0%,rgba(251,226,136,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(-45deg,  rgba(251,238,190,1) 0%,rgba(251,226,136,1) 100%); /* IE10+ */
		background: linear-gradient(135deg,  rgba(251,238,190,1) 0%,rgba(251,226,136,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbeebe', endColorstr='#fbe288',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

		border: 1px solid;
		border-top-color: #FBE3BE;
		border-right-color: #cdc8c0;
		border-bottom-color: #bcb7b0;
		border-left-color: #f4dccb;
		-moz-box-shadow:inset 0px 0px 1px 1px #fbe3be;
		-webkit-box-shadow:inset 0px 0px 1px 1px #fbe3be;
		box-shadow:inset 0px 0px 1px 1px #fbe3be;
		transition:All 0.5s ease-in-out;
		-webkit-transition:All 0.5s ease-in-out;
		-moz-transition:All 0.5s ease-in-out;
		-o-transition:All 0.5s ease-in-out;
	}
	.peachyellow:hover {
		background-position: 290px;
		color: #8F3E11;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.