Gcyrillus , static digicode, no psd

dabblet.css

/* Gcyrillus , static digicode, no psd */
a {
display:inline-block;
height:70px;
width:70px;
margin:20px;
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;
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);
}
.scaledigit {font-size:4em;line-height:1.1em;}
a span {font-size:14px;
text-transform:uppercase;
display:block;
text-align:center;
line-height:0.1em;
font-style:italic;
}

div#phone {background:#555;
width:400px;padding:100px 130px;
margin:2em auto;
text-align:center;
border-radius:700px;
background-image:linear-gradient(-90deg,#222,#444,#111);
box-shadow:1px 2px  3px 2px #000,
0 0 5px 5px #333,
0 0 7px 7px  #999,
0 0 9px 9px #555,
0 0 0 10px #000;

dabblet.html

<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">&#42;</a>
<a href="#">0</a>
<a href="#">&#35;</a>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

https://dabblet.com/gist/2956762