CSS3 Lego Block Button

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



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>



Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s