Pure CSS3 Lego Block Button

by Taufik Nurrohman

HTML

<a class='lego red' href='#'>Lego Button</a>
<a class='lego green' href='#'>Lego Button</a>
<a class='lego blue' href='#'>Lego Button</a>
<a class='lego yellow' href='#'>Lego Button</a>

CSS

body {padding:30px 0px;}

/* RED (DEFAULT COLOR) */
.lego {
  margin:0px auto 10px;
  cursor:pointer;
  background-color:#B2050A;
  width:110px;
  display:block;
  font:10px/57px Arial,Sans-Serif;
  color:rgba(0,0,0,0.4);
  text-shadow:0px 1px 0px rgba(255,255,255,0.1);
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  position:relative;
  -webkit-box-shadow:
    0px 1px 0px 0px #880408,
    0px 3px 0px -1px #880408,
    0px 5px 0px -2px #880408,
    0px 6px 7px rgba(0,0,0,0.9);
  -moz-box-shadow:
    0px 1px 0px 0px #880408,
    0px 3px 0px -1px #880408,
    0px 5px 0px -2px #880408,
    0px 6px 7px rgba(0,0,0,0.9);
  box-shadow:
    0px 1px 0px 0px #880408,
    0px 3px 0px -1px #880408,
    0px 5px 0px -2px #880408,
    0px 6px 7px rgba(0,0,0,0.9);
}

.lego:before {
  content:"";
  width:15px;
  height:15px;
  background-color:#CB0D12;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  position:absolute;
  top:7px;
  left:8px;
  -webkit-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #CB0D12, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #CB0D12, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #CB0D12, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #CB0D12, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #CB0D12, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #CB0D12, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #CB0D12, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #CB0D12, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #CB0D12, 80px 29px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #CB0D12, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #CB0D12, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #CB0D12, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #CB0D12, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #CB0D12, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #CB0D12, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #CB0D12, 40px 29px 2px...