Home » , , » CSS3 Lego Block Button

CSS3 Lego Block Button

CSS3 Lego Block

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

/* 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 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);
  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);
}

/* GREEN */
.lego.green {
 background-color:#36AA34;
  -webkit-box-shadow:
    0px 1px 0px 0px #217E21,
    0px 3px 0px -1px #217E21,
    0px 5px 0px -2px #217E21,
    0px 6px 7px rgba(0,0,0,0.9);
  -moz-box-shadow:
    0px 1px 0px 0px #217E21,
    0px 3px 0px -1px #217E21,
    0px 5px 0px -2px #217E21,
    0px 6px 7px rgba(0,0,0,0.9);
  box-shadow:
    0px 1px 0px 0px #217E21,
    0px 3px 0px -1px #217E21,
    0px 5px 0px -2px #217E21,
    0px 6px 7px rgba(0,0,0,0.9);
}

.lego.green:before {
  background-color:#3BB439;
  -webkit-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
}

/* BLUE */
.lego.blue {
 background-color:#3676B7;
  -webkit-box-shadow:
    0px 1px 0px 0px #2764A2,
    0px 3px 0px -1px #2764A2,
    0px 5px 0px -2px #2764A2,
    0px 6px 7px rgba(0,0,0,0.9);
  -moz-box-shadow:
    0px 1px 0px 0px #2764A2,
    0px 3px 0px -1px #2764A2,
    0px 5px 0px -2px #2764A2,
    0px 6px 7px rgba(0,0,0,0.9);
  box-shadow:
    0px 1px 0px 0px #2764A2,
    0px 3px 0px -1px #2764A2,
    0px 5px 0px -2px #2764A2,
    0px 6px 7px rgba(0,0,0,0.9);
}

.lego.blue:before {
  background-color:#3683CE;
  -webkit-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
}

/* YELLOW */
.lego.yellow {
 background-color:#EACB00;
  -webkit-box-shadow:
    0px 1px 0px 0px #D1A503,
    0px 3px 0px -1px #D1A503,
    0px 5px 0px -2px #D1A503,
    0px 6px 7px rgba(0,0,0,0.9);
  -moz-box-shadow:
    0px 1px 0px 0px #D1A503,
    0px 3px 0px -1px #D1A503,
    0px 5px 0px -2px #D1A503,
    0px 6px 7px rgba(0,0,0,0.9);
  box-shadow:
    0px 1px 0px 0px #D1A503,
    0px 3px 0px -1px #D1A503,
    0px 5px 0px -2px #D1A503,
    0px 6px 7px rgba(0,0,0,0.9);
}

.lego.yellow:before {
  background-color:#F2D305;
  -webkit-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
}

.lego:active {
  top:3px;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

Demo

Lihat Demo
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website
Posted by Shannenpio Cloning at 19:00
Labels: , ,

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Homtimpa - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger