CodePen

HTML

            
              
            
          
!

CSS

            
              .pin 
{
    position:absolute;
    border-radius:20px;
    background: #ab733a; /* Old browsers */
    background: -moz-linear-gradient(left, #ab733a 1%, #d1a578 30%, #ab733a 53%, #d1a578 75%, #ab733a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ab733a), color-stop(30%,#d1a578), color-stop(53%,#ab733a), color-stop(75%,#d1a578), color-stop(100%,#ab733a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ab733a 1%,#d1a578 30%,#ab733a 53%,#d1a578 75%,#ab733a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ab733a 1%,#d1a578 30%,#ab733a 53%,#d1a578 75%,#ab733a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ab733a 1%,#d1a578 30%,#ab733a 53%,#d1a578 75%,#ab733a 100%); /* IE10+ */
    background: linear-gradient(to right, #ab733a 1%,#d1a578 30%,#ab733a 53%,#d1a578 75%,#ab733a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab733a', endColorstr='#ab733a',GradientType=1 ); /* IE6-9 */
    
    -webkit-box-shadow: 	0 rgba(0,0,0,0.2) .5em 5px;	/* drop shadow */
    -moz-box-shadow:  0 rgba(0,0,0,0.2) .5em 5px;	/* drop shadow */
    box-shadow:  0 rgba(0,0,0,0.3) .5em 5px;	/* drop shadow */
}
.plate {
	position: absolute;
	border-top: 			none;
	border-bottom: 			none; /*1em double inherit; */
	
	-webkit-border-radius: 	7em / 1.5em; 
	-moz-border-radius: 	7em / 1.5em; 
	border-radius: 			7em / 1.5em;
	
	color: 				hsl(25, 53%, 83%) !important;
	background-color: 	hsl(25, 53%, 83%);
	
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
	hsl(25, 53%, 83%) 0 .1em 3px, hsl(25, 37%, 83%) 0 .3em 1px, /* color border */
	rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
	hsl(25, 53%, 83%) 0 .1em 3px, hsl(25, 37%, 83%) 0 .3em 1px, /* color border */
	rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	box-shadow: 		inset rgba(255,254,255,0.7) 0.3em 0.4em .4em,  /*inner shadow */
 inset rgba(171, 115, 58, 1.0) 0 -3.1em 0,
   /* color border */
	rgba(0,0,0,0.3) 0 .5em 5px;	/* drop shadow */
}


.disc {
    position:absolute;
    border-radius:20px;
    -moz-box-shadow: 8px 0px 8px #333;
    -webkit-box-shadow: 8px 0px 8px #333; 
    box-shadow: 8px 0px 8px #333;
    height: 50px;
    width: 100px;
    display:block;
    
    -moz-border-radius:75px;
    -webkit-border-radius: 75px;
    border-radius: 75px;
}
.oval {
 position:absolute;
	border-top: 			none;
	border-bottom: 			none; /*1em double inherit; */
	
	-webkit-border-radius: 	7em / 1.5em; 
	-moz-border-radius: 	7em / 1.5em; 
	border-radius: 			7em / 1.5em;
	
	color: 				hsl(55, 100%, 40%) !important;
	background-color: 	rgba(204, 78, 0, 0.5); /*(hsl(55, 100%, 40%);*/
	
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
 hsl(188, 100%, 20%) 0 .1em 3px, hsl(188, 100%, 20%) 0 .3em 1px, /* color border */
	rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
	hsl(188, 100%, 20%) 0 .1em 3px, hsl(188, 100%, 20%) 0 .3em 1px, /* color border */
	rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	box-shadow: 		inset rgba(255,254,255,0.7) 0.3em 0.4em .4em,  /*inner shadow */
	inset rgba(204, 78, 0, 1.0) 0 -3.1em 0,
 /* color border */
	rgba(0,0,0,0.3) 0 .5em 5px;   /* drop shadow */
							
				
}

.control {
 position:absolute;
	text-decoration: 		none;
	font: 		24px/1em 'Droid Sans', sans-serif;
	font-weight: 			bold;
	text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
	-webkit-user-select: 	none;
	-moz-user-select: 		none;
	user-select: 			none;

	padding: 				.5em .6em .4em .6em;
	margin: 				.5em;
	display: 				inline-block;
	
	-webkit-border-radius: 	8px;
	-moz-border-radius: 	8px;
	border-radius: 	8px;

	border-top: 		1px solid rgba(255,255,255,0.8);
	border-bottom: 		1px solid rgba(0,0,0,0.1);
	
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
	background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));

	-webkit-transition: background .2s ease-in-out;
	-moz-transition: 	background .2s ease-in-out;
	transition: 		background .2s ease-in-out;

	background-color: 	hsl(61, 100%, 20%);
	
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
	hsl(61, 100%, 67%) 0 .1em 3px, hsl(61, 50%, 30%) 0 .3em 1px, /* color border */
	rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
	hsl(61, 100%, 67%) 0 .1em 3px, hsl(61, 50%, 30%) 0 .3em 1px, /* color border */
	rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
	hsl(61, 100%, 67%) 0 .1em 3px, hsl(61, 50%, 30%) 0 .3em 1px, /* color border */
	rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */           
}

.control:hover {
 background-color: hsl(61, 100%, 37%);}

.control:active {
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
	background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));

	-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

	-webkit-transform: 	translateY(.2em);
	-moz-transform: 	translateY(.2em);
	transform: 			translateY(.2em);
}
.button_down {
    box-shadow: -3px -3px 3px #777;
    -moz-box-shadow: -3px -3px 3px #777;
    -webkit-box-shadow: -3px -3px 3px #777; 
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................