Tabel Konten
- HTML
- CSS
- Demo
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
5 Komentar
Unknown
mantep ijin buat eksperimen :)
Taufik Nurrohman
@Admin Khakhakha... silakan mas. Dapat inspirasi dari seseorang di forum <3
Unknown
Wah CSS dan HTML ditaruh dmn ya mas?
tolong dijawab secepatnya.. soalnya ini keren banget!
Taufik Nurrohman
⇒ /2012/10/auto-hide-search-form-inside-header.html?showComment=1362491980039#c2434000627795299994
Unknown
Saya terinspirasi dengan ente
Post ente bagus-bagus nih :D