LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
CSS
.vertical, .horizontal {
  position: relative;
  left: 26px;
  top: 19px;
  width: 2px;
  height: 16px;
  background-color: white;
}

.horizontal {
  position: relative;
  top: 3px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.circle {
  float: left;
  zoom: 2;
  margin: 1em;
  width: 54px;
  height: 54px;
  background-color: #d62d20;
  border-radius: 50%;
  box-shadow: 0px 5px 10px #b2b2b2;
}
.circle .vertical, .circle .horizontal {
  -webkit-transition: width 1s, height 1s, top 1s, left 1s, -webkit-transform 1s;
  transition: width 1s, height 1s, top 1s, left 1s, -webkit-transform 1s;
  transition: transform 1s, width 1s, height 1s, top 1s, left 1s;
  transition: transform 1s, width 1s, height 1s, top 1s, left 1s, -webkit-transform 1s;
}
.circle .horizontal {
  -webkit-transition: width 1s, height 1s, top 1s, left 1s, -webkit-transform 1s;
  transition: width 1s, height 1s, top 1s, left 1s, -webkit-transform 1s;
  transition: transform 1s, width 1s, height 1s, top 1s, left 1s;
  transition: transform 1s, width 1s, height 1s, top 1s, left 1s, -webkit-transform 1s;
}
.circle:hover .vertical, .circle:hover .horizontal {
  width: 4px;
  height: 4px;
  top: 17px;
  left: 32px;
  -webkit-transform: rotate(220deg);
          transform: rotate(220deg);
}
.circle:hover .horizontal {
  width: 4px;
  height: 19px;
  top: 15px;
  left: 24px;
  -webkit-transform: rotate(220deg);
          transform: rotate(220deg);
}
.circle:hover .horizontal:before {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 4px solid white;
  position: relative;
  top: -5px;
}

Description

I was fascinated by the google inbox compose button, and wanted to try to replicate it. However, google's just swaps between two images, and that felt boring, so I decided to transform between the shapes with css
Term
Wed, 12/06/2017 - 19:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv