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