Tuesday 22 May 2012

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>

Sumber :
DAFTAR ISI
at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Two Reasons why IPS is a "Must Have" for your Network

Introduction This is the third in my Security Series of Connect articles.  For more information on how to keep your enterprise environm...