<div class="metal shade">
  <div>
    <div style="background-image: url(http://kolyan.net/uploads/posts/2010-03/1267533070_macrophotographybyjoakimkraemer_0021.png); "></div>
  </div>
</div>
.metal {
		margin: 0 auto;
		text-align: center;
		width: 150px;
		height: 150px;
		border-radius: 45px;
		position: relative;
		background: rgb(171,136,82); /* Old browsers */
		background: -moz-linear-gradient(left,  rgba(171,136,82,1) 0%, rgba(251,227,190,1) 40%, rgba(251,227,190,1) 60%, rgba(171,136,82,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(171,136,82,1)), color-stop(40%,rgba(251,227,190,1)), color-stop(60%,rgba(251,227,190,1)), color-stop(100%,rgba(171,136,82,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(171,136,82,1) 0%,rgba(251,227,190,1) 40%,rgba(251,227,190,1) 60%,rgba(171,136,82,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(171,136,82,1) 0%,rgba(251,227,190,1) 40%,rgba(251,227,190,1) 60%,rgba(171,136,82,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(171,136,82,1) 0%,rgba(251,227,190,1) 40%,rgba(251,227,190,1) 60%,rgba(171,136,82,1) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(171,136,82,1) 0%,rgba(251,227,190,1) 40%,rgba(251,227,190,1) 60%,rgba(171,136,82,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab8852', endColorstr='#ab8852',GradientType=1 ); /* IE6-9 */
		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;
	}
	.metal > div {
		position: absolute;
		top: 15px;
		width: 150px;
		height: 150px;
		border-radius: 45px;
		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;
	}
	.metal > div > div {
		position: absolute;
		top: 8px;
		left: 8px;
		margin-top: 15px;
		width: 135px;
		height: 135px;
		border-radius: 45px;
		margin: auto;
		background-size: auto 100%;
    background-position: center;
		box-shadow:
    inset 0px 20px 30px 0px rgba(0,0,0,0.3),
    inset 0px -10px 1px 0px rgba(143,62,17,0.9),
    inset 0px -5px 3px 0px rgba(0,0,0,0.9);
		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;		
	}
	.metal:hover {
		background-position: -150px;
	}
	.metal > div:hover {
		background-position: 0 150px;
	}
	.metal > div > div:hover {
		box-shadow: inset 0px 0px 30px 5px rgba(255,255,255,0.5);
    background-size: auto 107%;
	}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.