Push Buttons

Inspiration

Dribbble is a community of designers and based on the basketball theme of the site, users can rebound (make a version of) another users post. Posts are mostly screen caps of current projects. As a coding challenge I rebounded a screen cap of a reported all css design. All I had to work with was a 800 x 600 jpg.

code highlight: 

.pad {
padding: 0 10px;
float: left;
border: 1px solid hsla(0,0%,0%,.15);
border-radius: 10px;
box-shadow: 1px 1px 1px hsla(0,0%,100%,.2),
inset 1px 1px 1px hsla(0,0%,100%,.2);

ul {
float: left;
list-style: none;
padding: 0;
margin: 0;
}
li {
border: 1px solid hsla(0,0%,0%,.15);
border-radius: 10px;
text-align: center;
background-color: ;
box-shadow: 4px 4px 4px rgba(000, 000, 000, 0.6),
inset 1px 1px 1px hsla(0,0%,100%,.2);
color: #fff;
white-space: nowrap;
padding: 20px 25px;
text-shadow: 1px 1px 1px rgba(000, 000, 000, 0.2);
margin:20px 10px 20px 10px;
position: relative;
&:hover, &:focus {
background-color:darken(,4%);
}
&:active {
box-shadow: 1px 0 1px rgba(000, 000, 000, 0.4);
@include transform(translate(3px, 3px));
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: -5px;
bottom: -5px;
}
&:active:after {
top: -3px;
left: -3px;
right: -2px;
bottom: -2px;
}
}
}

See the Pen keypad by charlie (@CharlesAMoss) on CodePen.