CSS3 Digicode - Snippet

Preview
HTML
CSS
JS

<div class="p3d">
	<script src="http://dabblet.com/code/prefixfree.min.js" type="text/javascript"></script>
	<div id="phone">
		<a href="#">1</a> 
		<a href="#">2<span>abc</span></a> 
		<a href="#">3<span>def</span></a> 
		<a href="#">4<span>ghi</span></a> 
		<a href="#">5<span>jkl</span></a> 
		<a href="#">6<span>mno</span></a> 
		<a href="#">7<span>pqrs</span></a> 
		<a href="#">8<span>tuv</span></a> 
		<a href="#">9<span>wxyz</span></a> 
		<a href="#" class="scaledigit">*</a> 
		<a href="#">0</a> <a href="#">#</a>
	</div>
</div>

/* Gcyrillus ,  digicode, no psd */
a {
transition:0.1s;
display:inline-block;
height:70px;
width:70px;
margin:20px;
vertical-align:top;
text-align:center;
border:1px solid rgba(0,0,0,0.72);
border-radius:70px;
background:#454545;
color:white;
text-decoration:none;
font-family:helvetica;
font-weight:bold;
line-height:50px;
font-size:35px;
text-shadow:0 0 2px white;
overflow:hidden;
background-image:linear-gradient(-90deg,#222,#444);
box-shadow:
0 -5px 10px rgba(0,0,0,0.75),
0 0 15px  rgba(0,0,0,1),
0 0 1px 3px rgba(0,0,0,0.5),
0 4px 5px rgba(255,255,255,0.5),
inset 0 2px 3px #555,
inset 0 4px 5px #000,
inset 0 0 3px #000,
inset 0 -20px 15px rgba(255,255,255,0.05);
position:relative;
}
.scaledigit {font-size:4em;line-height:1.1em;}
a span {font-size:14px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0em;
margin-top:-5px;
font-style:italic;
}
div#phone {background:#555;
width:400px;padding:100px 130px;
margin:2em auto;
text-align:center;
border-radius:70px;
background-image:
linear-gradient(-40deg,#222,transparent,#111), 
linear-gradient(40deg,#222,transparent,#111), 
linear-gradient(-40deg,#222,transparent,#111),
linear-gradient(40deg,#222,transparent,#111)
;
box-shadow:1px 2px  3px 2px #000,
0 0 5px 5px #333,
0 0 7px 7px  #999,
0 0 0px 9px #555,
0 0 1px 11px #000,
120px 400px 400px -100px white;
background-size:70% 70%;
background-position:center;
transform:rotateY(20deg) rotateZ(-5deg) rotateX(-15deg);
}
a:hover, a:focus {
transition:0.1s;
outline:0;
text-shadow:0 0 2px black, 0 0 2px white;;
height:65px;
padding-top:5px;
background-image:linear-gradient(-90deg,#444,#222);
box-shadow:
0 5px 10px rgba(0,0,0,0.75),
0 0 15px  rgba(0,0,0,1),
0 0 1px 3px rgba(0,0,0,0.5),
0 -4px 5px rgba(255,255,255,0.5),
inset 0 -2px 3px #555,
inset 0 -4px 5px #000,
inset 0 0 3px #000,
inset 0 20px 15px rgba(255,255,255,0.05);
}
body {
vertical-align:middle;
display:table-cell;
}
.p3d {
perspective:1000px;
transform-style:preserve-3d;
}
html {display:table;
background-image:linear-gradient(120deg, #123 50%, #789 50%);
height:100%;
width:100%;
}