Push Buttons

Error message

  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /home/chamos77/charlesamoss.com/includes/common.inc).
  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in menu_set_active_trail() (line 2405 of /home/chamos77/charlesamoss.com/includes/menu.inc).

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 {
&: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.