LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
@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;
}

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

.right-top,
.right-bottom,
.left-top,
.left-bottom{
  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

 

Description

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

Related Codes

Pen ID
Pen ID
Pen ID