CSS 3 Transition Example - Shape Change

by VIvek Vaishnav

HTML

<div class="box1"><span>Square</span>
<span>Circle</span>
</div>

CSS

.box1 {
  padding: 70px;
  margin: 5px;
  background: #c5e1a5;
  width: 100px;
  text-align: center;
  font-size: 1.5em;
  font-weight: 900
}
.after {
  display: none
}
.box1:hover {
  border-radius: 50%;
}
.box1:hover span.before {
  display: none
}
.box1 {
  transition-property: all;
  transition-duration: 2s
}