Pen ID
Unlock Campus Themeforest adv


@import url(https://fonts.googleapis.com/css?family=Poppins:300);

div {
  width: 200px;

.button {
  width: 100%;
  height: 75px;
  position: relative;
  overflow: hidden;
  background: #ddd;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  line-height: 50px;

svg {
  position: absolute;
  top: 0;
  left: 0;

.bottom-left {
  stroke-width: 5;
  stroke: #000;
  fill: none;
  stroke-dasharray: 200;
  -webkit-transition: -webkit-transform 1s ease-out;
  transition: transform 1s ease-out;

  stroke-width: 5;
  stroke: #000;
  fill: none;
  stroke-dasharray: 50;
  -webkit-transition: -webkit-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;

.button:hover {
  cursor: pointer;

.button:hover svg line.top-left,
.button:hover svg line.bottom-left {
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);

.button:hover svg line.top-right,
.button:hover svg line.bottom-right {
  -webkit-transform: translateX(100px);
  transform: translateX(100px);

.button:hover svg line.left-top,
.button:hover svg line.right-top {
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);

.button:hover svg line.left-bottom,
.button:hover svg line.right-bottom {
  -webkit-transform: translateY(50px);
  transform: translateY(50px);

.button:hover {
  color: orange;
  -webkit-transition: color .5s ease-in;
Host Instantly Drag and Drop Website Builder



Button border animation experiment using SVG and CSS transitions
Mon, 11/27/2017 - 22:14

Related Codes

Pen ID
Pen ID
Pen ID