Fancy button

A really fancy button

by Arjun Singh

HTML

<button class="fancy-button">Button</button>

CSS

button.fancy-button{
  appearance: none;
  border: none;
  border-radius: none;
  
	background: black;
  color: red;
  
  padding: 16px;
  
  font-family: Roboto, sans-serif;
  font-size: 22px;
  
  position: relative;
}

button.fancy-button::after{
  position: relative;
  content: "";
  
  position: absolute;
  top: -2px;
  left: 0;
  
  height: calc(100% + 4px);
  width: 100%;
  
  background-color: red;
  z-index: -1;
  pointer-events: none;
  
  clip-path: polygon(100% 0, 100% 0, 0 100%, 0 100%);
  
  transition: all ease-in 0.25s;
}

button.fancy-button:hover::after{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

button.fancy-button::before{
  content: "";
  
  position: absolute;
  top: 0;
  left: -2px;
  
  height: 100%;
  width: calc(100% + 4px);
  
  background-color: red;
  z-index: -1;
  pointer-events: none;
  
  clip-path: polygon(0 0, 0 0, 100% 100%, 100% 100%);
  
  transition: all ease-in-out 0.25s;
}

button.fancy-button:hover::before{
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}