LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Sweet Buttons

Cool buttons with cool downstate using pseudo classes

Your Community Find Out More Online / Offline Our Products Data Control Contact

by this guy and this guy.

CSS
body {
  background-color: #f2f2f2;
  font-family: 'Lato', sans-serif;
  font-size: 21px;
  text-align: center;
}
.container {
  width: 900px;
  margin: 100px auto;
}

/* button */
.button{
  display: block;
  float: left;
  position: relative;
  text-decoration: none;
  color: #333;
  border: 3px solid #333333;
  padding: 20px 30px;
  margin: 40px;
}


/* blue border offset */
.button:after {
  content: '';
  border: 3px solid #3600fc;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  color: #f2f2f2;
  white-space:nowrap;
}

/* grey border position */
.button:active {
  top: 3px;
  left: 3px;
}

/* blue border position */
.button:active:after{
  top: 2px;
  left: 2px
}

/* fill background color */
.button:hover{
  background: rgba(242,242,242,1);
}

.by {
  display: block;
  float: left;
  width: 100%;
}

Description

Buttons use pseudo elements that create overlapping borders. On the down state the background fills and animates down.
Term
Wed, 12/06/2017 - 19:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv