<div class="container">
  <button>
    <span>Zoom Corners</span>
    <div class="zoom-corners top-corners"></div>
    <div class="zoom-corners bottom-corners"></div>
  </button>
  
  <button style="overflow: hidden;">
    <span>Corner Cover</span>
    <div class="corner-cover"></div>
  </button>
  
  <button>
    <span>Grow Corners</span>
    <div class="grow-corners top-corners"></div>
    <div class="grow-corners bottom-corners"></div>
  </button>
  
  <button>
    <span>Shrink</span>
    <div class="shrink"></div>
  </button>
  
  <button>
    <span>Blink</span>
    <div class="blink"></div>
  </button>
  
  <button>
    <span>Glow Bar</span>
    <div class="glow-bar"></div>
  </button>
  
  <button>
    <span>Spiral</span>
    <div class="spiral-top"></div>
    <div class="spiral-bottom"></div>
  </button>
  
  <button>
    <span>Diagonal Fade</span>
    <div class="diagonal-fade"></div>
  </button>
  
  <button>
    <span>Corner Flip</span>
    <div class="corner-flip-inside"></div>
    <div class="corner-flip"></div>
  </button>
  
  <button>
    <span>Doppler</span>
    <div class="doppler"></div>
  </button>
  
  <button>
    <span>Framed</span>
    <div class="framed-top"></div>
    <div class="framed-bottom"></div>
  </button>
  
  <button>
    <span>Plus Corners</span>
    <div class="spin">
      <div class="plus top-corners"></div>
      <div class="plus bottom-corners"></div>
    </div>
  </button>
  
  <button>
    <span>Wipe</span>
    <div class="wipe"></div>
  </button>
  
  <button>
  </button>
  
  <button>
  </button>
  
  <button>
  </button>
</div>
* {
  box-sizing: border-box;
}

body {
  background: #3c3c3c;
}

span {
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.container {
  width: 100%;
  height: 100vh;
  padding: 30px;
  display: flex;
  display: webkit-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  justify-content: space-between;
}

button {
  background: rgba(0,0,0,.3);
  width: 200px;
  height: 200px;
  position: relative;
  border: none;
  cursor: pointer;
  margin: 15px;
}

button:focus {
  border: none;
  box-shadow: none;
}

/* -----------------------------
-------BUTTON 1 STYLES----------
----------------------------- */

.zoom-corners::before, .zoom-corners::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: #00edff;
    border-style: solid;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.zoom-corners.bottom-corners::before {
  border-width: 0 0 1px 1px;
  left: 25px;
  bottom: 25px;
}

.zoom-corners.bottom-corners::after {
  border-width: 0 1px 1px 0;
  right: 25px;
  bottom: 25px;
}

.zoom-corners.top-corners::before {
  border-width: 1px 0 0 1px;
  left: 25px;
  top: 25px;
}

.zoom-corners.top-corners::after {
  border-width: 1px 1px 0 0;
  right: 25px;
  top: 25px;
}

button:hover .zoom-corners.top-corners::before{
  top: 0px;
  left: 0px;
}
button:hover .zoom-corners.top-corners::after{
  top: 0px;
  right: 0px;
}
button:hover .zoom-corners.bottom-corners::before{
  bottom: 0px;
  left: 0px;
}
button:hover .zoom-corners.bottom-corners::after{
  bottom: 0px;
  right: 0px;
}

/* -----------------------------
-------BUTTON 2 STYLES----------
----------------------------- */

.corner-cover {
  position: absolute;
  width: 100px;
  height: 100px;
  right: -55px;
  bottom: -55px;
  background-color: #00edff;
  background-size: cover;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  -webkit-box-shadow: 0 0 7px 0 #00edff;
  box-shadow: 0 0 7px 0 #00edff;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

button:hover
.corner-cover {
  right: 0px;
  bottom: 0px;
}

/* -----------------------------
-------BUTTON 3 STYLES----------
----------------------------- */

.grow-corners::before, .grow-corners::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: #00edff;
    border-style: solid;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.grow-corners.bottom-corners::before {
  border-width: 0 0 1px 1px;
  left: 0;
  bottom: 0;
}

.grow-corners.bottom-corners::after {
  border-width: 0 1px 1px 0;
  right: 0;
  bottom: 0;
}

.grow-corners.top-corners::before {
  border-width: 1px 0 0 1px;
  left: 0;
  top: 0;
}

.grow-corners.top-corners::after {
  border-width: 1px 1px 0 0;
  right: 0;
  top: 0;
}

button:hover
.grow-corners::before {
  width: 50px;
  height: 50px;
}

button:hover
.grow-corners::after {
  width: 50px;
  height: 50px;
}

/* -----------------------------
-------BUTTON 4 STYLES----------
----------------------------- */

.shrink {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0px;
  top: 0px;
  border-color: #00edff;
  border-style: solid;
  border-width: 0px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

button:hover
.shrink {
  border-width: 100px;
  opacity: 1;
}

/* -----------------------------
-------BUTTON 5 STYLES----------
----------------------------- */

.blink {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0px;
  top: 0px;
  border-color: #00edff;
  border-style: solid;
  border-width: 1px;
  opacity: 0;
  -webkit-box-shadow: 0 0 7px 0 #00edff;
  box-shadow: 0 0 7px 0 #00edff;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

@keyframes blink {
  0% { opacity: 1; }
  2% { opacity: 0; }
  4% { opacity: 1; }
  6% { opacity: 0; }
  15% { opacity: 1; }
  16% { opacity: 0; }
  17% { opacity: 1; }
  18% { opacity: 0; }
  30% { opacity: 1; }
  31% { opacity: 0; }
  50% { opacity: 1; }
  52% { opacity: 0; }
  54% { opacity: 1; }
  70% { opacity: 0; }
  71% { opacity: 1; }
  72% { opacity: 0; }
  73% { opacity: 1; }
  74% { opacity: 0; }
}
@-webkit-keyframes blink {
  0% { opacity: 1; }
  2% { opacity: 0; }
  4% { opacity: 1; }
  6% { opacity: 0; }
  15% { opacity: 1; }
  16% { opacity: 0; }
  17% { opacity: 1; }
  18% { opacity: 0; }
  30% { opacity: 1; }
  31% { opacity: 0; }
  50% { opacity: 1; }
  52% { opacity: 0; }
  54% { opacity: 1; }
  70% { opacity: 0; }
  71% { opacity: 1; }
  72% { opacity: 0; }
  73% { opacity: 1; }
  74% { opacity: 0; }
}
button:hover
.blink {
  animation: blink 2.5s step-start 0s infinite;
  -webkit-animation: blink 2.5s step-start 0s infinite;
}

/* -----------------------------
-------BUTTON 6 STYLES----------
----------------------------- */

.glow-bar {
  background: #00edff;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 0px;
  height: 1px;
  -webkit-box-shadow: 0 0 7px 0 #00edff;
  box-shadow: 0 0 7px 0 #00edff;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

button:hover
.glow-bar {
  width: 200px;
}

/* -----------------------------
-------BUTTON 7 STYLES----------
----------------------------- */

.spiral-top::before,
.spiral-top::after,
.spiral-bottom::before,
.spiral-bottom::after {
  content: " ";
  background: #00edff;
  position: absolute;
  -webkit-box-shadow: 0 0 7px 0 #00edff;
  box-shadow: 0 0 7px 0 #00edff;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.spiral-top::before {
  top: 0px;
  left: 0px;
  width: 1px;
  height: 0px;
}
.spiral-top::after {
  top: 0px;
  right: 0px;
  width: 0px;
  height: 1px;
}
.spiral-bottom::before {
  bottom: 0px;
  left: 0px;
  width: 0px;
  height: 1px;
}
.spiral-bottom::after {
  bottom: 0px;
  right: 0px;
  width: 1px;
  height: 0px;
}

button:hover
.spiral-top::before {
  height: 200px;
}
button:hover
.spiral-top::after {
  width: 200px;
}
button:hover
.spiral-bottom::before {
  width: 200px;
}
button:hover
.spiral-bottom::after {
  height: 200px;
}

/* -----------------------------
-------BUTTON 8 STYLES----------
----------------------------- */

.diagonal-fade::before,
.diagonal-fade::after {
  content: " ";
  background: #00edff;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0;
  -webkit-box-shadow: 0 0 7px 0 #00edff;
  box-shadow: 0 0 7px 0 #00edff;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.diagonal-fade::before {
  left: -20px;
  top: 20px;
}
.diagonal-fade::after {
  left: 20px;
  top: -20px;
}

button:hover
.diagonal-fade::before {
  opacity: .5;
  left: 0;
  top: 0;
}
button:hover
.diagonal-fade::after {
  opacity: .5;
  left: 0;
  top: 0;
}

/* -----------------------------
-------BUTTON 9 STYLES----------
----------------------------- */

.corner-flip {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0px;
  top: 0px;
  -webkit-clip-path: polygon(100% 100%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(100% 100%, 100% 0, 100% 100%, 0% 100%);
  background-color: #00edff;
  background-size: cover;
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s;
}

.corner-flip-inside {
  background-color: #e3e3e3;
  background-size: cover;
  width: 200px;
  height: 200px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  -webkit-clip-path: polygon(100% 100%, 100% 0, 0% 100%);
clip-path: polygon(100% 100%, 100% 0, 0% 100%);
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s;
}

button:hover
.corner-flip {
  -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0, 0% 100%);
  clip-path: polygon(100% 100%, 100% 0, 0 0, 0% 100%);
}

button:hover
.corner-flip-inside {
  opacity: .2;
}

/* -----------------------------
-------BUTTON 10 STYLES---------
----------------------------- */

.doppler {
  content: " ";
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0px;
  top: 0px;
  border-color: #00edff;
  border-style: solid;
  border-width: 1px;
  opacity: 0;
  -webkit-box-shadow: 0 0 7px 0 #00edff;
  box-shadow: 0 0 7px 0 #00edff;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

@keyframes doppler {
  50% { opacity: 1; }
  100% { opacity: 0; width: 170px; height: 170px; top: 15px; left: 15px; }
}
@-webkit-keyframes doppler {
  10% { opacity: 1; }
  100% { opacity: 0; width: 170px; height: 170px; top: 15px; left: 15px; }
}
button:hover
.doppler {
  animation: doppler 1s linear 0s infinite;
  -webkit-animation: doppler 1s linear 0s infinite;
}

/* -----------------------------
-------BUTTON 11 STYLES---------
----------------------------- */

.framed-top::before,
.framed-top::after,
.framed-bottom::before,
.framed-bottom::after {
  content: " ";
  background: #00edff;
  position: absolute;
  -webkit-box-shadow: 0 0 7px 0 #00edff;
  box-shadow: 0 0 7px 0 #00edff;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.framed-top::before {
  top: 0px;
  left: 15px;
  width: 1px;
  height: 0px;
}
.framed-top::after {
  top: 15px;
  right: 0px;
  width: 0px;
  height: 1px;
}
.framed-bottom::before {
  bottom: 15px;
  left: 0px;
  width: 0px;
  height: 1px;
}
.framed-bottom::after {
  bottom: 0px;
  right: 15px;
  width: 1px;
  height: 0px;
}

button:hover
.framed-top::before {
  height: 200px;
}
button:hover
.framed-top::after {
  width: 200px;
}
button:hover
.framed-bottom::before {
  width: 200px;
}
button:hover
.framed-bottom::after {
  height: 200px;
}

/* -----------------------------
-------BUTTON 12 STYLES---------
----------------------------- */

.plus::before, .plus::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: #00edff;
    border-style: solid;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.plus.bottom-corners::before {
  border-width: 0 0 1px 1px;
  left: 25px;
  bottom: 25px;
}

.plus.bottom-corners::after {
  border-width: 0 1px 1px 0;
  right: 25px;
  bottom: 25px;
}

.plus.top-corners::before {
  border-width: 1px 0 0 1px;
  left: 25px;
  top: 25px;
}

.plus.top-corners::after {
  border-width: 1px 1px 0 0;
  right: 25px;
  top: 25px;
}

button:hover .plus.top-corners::before{
  top: 100px;
  left: 100px;
}
button:hover .plus.top-corners::after{
  top: 100px;
  right: 100px;
}
button:hover .plus.bottom-corners::before{
  bottom: 100px;
  left: 100px;
}
button:hover .plus.bottom-corners::after{
  bottom: 100px;
  right: 100px;
}

button:hover
span {
  opacity: 0;
}

.spin {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

button:hover
.spin {
  transform: rotate(90deg);
}

/* -----------------------------
-------BUTTON 13 STYLES---------
----------------------------- */

.wipe::before,
.wipe::after {
  content: " ";
  background: #00edff;
  width: 0px;
  height: 100px;
  position: absolute;
  -webkit-box-shadow: 0 0 7px 0 #00edff;
  box-shadow: 0 0 7px 0 #00edff;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.wipe::before {
  left: 0px;
  top: 0px;
}
.wipe::after {
  right: 0px;
  bottom: 0px;
}

button:hover
.wipe::before {
  width: 200px;
}
button:hover
.wipe::after {
  width: 200px;
}
// Made by Nick Merritt
// nick-merritt.com
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.