Pen ID
Unlock Campus Themeforest adv



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.

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

/* 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;

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

/* blue border position */
  top: 2px;
  left: 2px

/* fill background color */
  background: rgba(242,242,242,1);

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


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

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv