<h1>Ten hover effects</h1>

<div class="contentBox">
  <div id="first" class="buttonBox">
    <button>Hover One</button>
    <div class="border"></div>
    <div class="border"></div>
  </div>

  <div id="second" class="buttonBox">
    <button>Hover Two</button>
    <div class="border"></div>
    <div class="border"></div>
  </div>

  <div id="third" class="buttonBox">
    <button>Hover Three</button>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
  </div>

  <div id="fourth" class="buttonBox">
    <button>Hover Four</button>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
  </div>

  <div id="fifth" class="buttonBox">
    <button>Hover Five</button>
  </div>
<!-- </div>

<div class="contentBox"> -->
  <div id="sixth" class="buttonBox">
    <button>Hover Six</button>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
  </div>

  <div id="seventh" class="buttonBox">
    <button>Hover Seven</button>
  </div>

  <div id="eighth" class="buttonBox">
    <button>Hover Eight</button>
  </div>

  <div id="ninth" class="buttonBox">
    <button>Hover Nine</button>
  </div>

  <div id="tenth" class="buttonBox">
    <button>
      <span>H</span>
      <span>o</span>
      <span>v</span>
      <span>e</span>
      <span>r</span>
      <span> </span>
      <span>T</span>
      <span>e</span>
      <span>n</span>
    </button>
  </div>
</div>

* {
  box-sizing: border-box;
}

html{
  background-color:#ff4545;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  padding:1vw;
}

h1{
  color:white;
  margin:30px auto;
  width:50%;
  text-align:center;
  padding:20px;
  text-transform:uppercase;
  font-size:3vw;
  letter-spacing:5px;
  border-top:1px solid;
  border-bottom:1px solid;
}

.contentBox{
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.buttonBox{
  margin: 0 20px 40px;
  position:relative;
  max-width: 200px;
  min-width: 150px;
  flex: 20%;
}

button{
  width:100%;
  height:80px;
  position:relative;
  background:rgba(255, 255, 255, .27);
  text-transform:uppercase;
  color:white;
  font-weight:700;
  letter-spacing:1px;
  border:none;
  font-size:15px;
  outline:none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  cursor: pointer;
}


/* FIRST BUTTON */

.border{
    position:absolute;
    background:none;
    transition:all .5s ease-in-out;
}

#first>.border:nth-of-type(1){
  top:0;
  left:0;
  border-left:1px solid white;
  border-top:1px solid white;
  width:30px;
  height:30px;
}

#first>.border:nth-of-type(2){
  bottom:0;
  right:0;
  border-right:1px solid white;
  border-bottom:1px solid white;
  width:30px;
  height:30px;
}

#first:hover .border{
  width:102%;
  height:105%;
}


/* SECOND BUTTON */


#second>.border:nth-of-type(1){
  top:0;
  left:50%;
  width:0;
  border-top:1px solid white;
  transition:width .5s ease-in-out, transform 1s ease-in-out;
}

#second>.border:nth-of-type(2){
  bottom:0;
  left:50%;
  width:0;
  border-bottom:1px solid white;
  transition:width .5s ease-in-out, transform 1s ease-in-out;
}

#second:hover .border{
  transform:translate(-50%, 0);
  width:100%;
  transition:width .8s ease-in-out, transform .3s ease-in-out;
}

/* THIRD BUTTON */

#third>.border:nth-of-type(1){
  top:0;
  left:0;
  border-top:1px solid white;
  width:100%;
  height:100%;
}

#third>.border:nth-of-type(2){
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  border-bottom:1px solid white;
}

#third>.border:nth-of-type(3){
  left:0;
  top:0;
  height:100%;
  width:100%;
  border-left:1px solid white;
}

#third>.border:nth-of-type(4){
  top:0;
  right:0;
  height:100%;
  width:100%;
  border-right:1px solid white;
}

#third:hover .border:nth-of-type(1){
  transform:translate(0, 99%);
}

#third:hover .border:nth-of-type(2){
  transform:translate(0, -99%);
}

#third:hover .border:nth-of-type(3){
  transform:translate(99%, 0);
}

#third:hover .border:nth-of-type(4){
  transform:translate(-99%, 0);
}

/* FOURTH BUTTON */

#fourth>.border:nth-of-type(1){
  top:0;
  left:0;
  width:0;
  height:0;
  border-top:1px solid white;
}

#fourth>.border:nth-of-type(2){
  top:0;
  right:0;
  width:10px;
  height:0;
  border-right:1px solid white;
}

#fourth>.border:nth-of-type(3){
  bottom:0;
  right:0;
  width:0;
  height:0;
  border-bottom:1px solid white;
}

#fourth>.border:nth-of-type(4){
  bottom:0;
  left:0;
  width:0;
  height:0;
  border-left:1px solid white;
}

#fourth:hover .border:nth-of-type(1){
  width:100%;
}

#fourth:hover .border:nth-of-type(2){
  height:80px;
}

#fourth:hover .border:nth-of-type(3){
  width:100%;
}

#fourth:hover .border:nth-of-type(4){
  height:80px;
}


/* FIFTH BUTTON */

#fifth{
  overflow:hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  transition:all .2s ease-in-out;
}

#fifth:before{
  content:" ";
  display:block;
  width:200px;
  height:80px;
  background:rgba(255, 255, 255, .4);
  position:absolute;
  top:-10px;
  left:-200px;
  transform:rotate(-45deg);
  transition:all .2s ease-in-out;  
}

#fifth:hover:before{
  margin-left:300%;
}

#fifth:hover {
  border: 1px solid rgba(255, 255, 255, 1);
}


/* SIXTH BUTTON */

#sixth{
  overflow:hidden;
}

#sixth>button{
  z-index:1;
  transition:color .5s ease;
}

#sixth .border{
  z-index:0;
  background:white;
  width:30px;
  height:30px;
  transform:rotate(45deg);
}

#sixth>.border:nth-of-type(1){
  top:-35px;
  left:-30px; 
}

#sixth>.border:nth-of-type(2){
  top:-35px;
  right:-30px;
}

#sixth>.border:nth-of-type(3){
  bottom:-35px;
  left:-30px;
}

#sixth>.border:nth-of-type(4){
  bottom:-35px;
  right:-30px;
}

#sixth:hover .border{
  transform:scale(15.7) rotate(45deg);
}

#sixth:hover button{
  color:#ff9292;
  transition:color 2s ease;
}


/* SEVENTH BUTTON */

#seventh>button{
  border:1px solid rgba(255, 255, 255, 0);
  transition:all .5s ease-in-out;
}

#seventh:hover button{
  border:1px solid white;
  font-size:20px;
}


/* EIGHTH BUTTON */

#eighth>button{
  transition: all .18s ease-in-out;
}

#eighth:hover button{
  text-shadow:
    0 0 30px rgba(255,255,255, 1),
    0 0 60px rgba(255, 255, 255, .8),
    0 0 75px rgba(255, 255, 255, .6),
    0 0 80px rgba(255, 255, 255, .4),
    0 0 77px rgba(255, 255, 255, .5),
    0 0 78px rgba(255, 255, 255, .4),
    0 0 79px rgba(255, 255, 255, .3),
    0 0 80px rgba(255, 255, 255, .2),
    0 0 120px rgba(255, 255, 255, .1);
}


/* NINTH HOVER */

#ninth>button{
  transition:all .5s ease-in-out;
}

#ninth:hover button{
  background:white;
  color:#ff9292;
}


/* TENTH BUTTON */

#tenth>button{
  letter-spacing:0;
}

#tenth span{
  letter-spacing:0;
  display:inline-block;
  position:relative;
  width:8px;
  transition:all .5s ease-in-out;
}

#tenth span:nth-of-type(4){
  width:5px;
}

#tenth span:nth-of-type(6){
  width:1px;
}

#tenth span:nth-of-type(8){
  width:4px;
}

#tenth:hover span:nth-of-type(1){
  animation:h .5s;
}

#tenth:hover span:nth-of-type(2){
  animation:o .5s;
}

#tenth:hover span:nth-of-type(3){
  animation:v .5s;
}

#tenth:hover span:nth-of-type(4){
  animation:e .5s;
}

#tenth:hover span:nth-of-type(5){
  animation:r .5s;
}

#tenth:hover span:nth-of-type(7){
  animation:t .5s;
}

#tenth:hover span:nth-of-type(8){
  animation:e .5s;
}

#tenth:hover span:nth-of-type(9){
  animation:n .5s;
}

@keyframes h{
  0%{transform:translate(0, 0);}
  50%{transform:translate(50px, 5px);}
  75%{transform:translate(5px, 5px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes o{
  0%{transform:translate(0, 0);}
  25%{transform:translate(-4px, 0);}
  50%{transform:translate(3px, 4px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes v{
  0%{transform:translate(0, 0);}
  20%{transform:rotate(360deg);}
  50%{transform:scale(2);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes e{
  0%{transform:translate(0, 0);}
  20%{transform:translate(-10px, -2px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes r{
  0%{transform:translate(0, 0);}
  20%{transform:translate(0, 10px);}
  80%{transform:translate(0, 32px);}
  100%{transform:translate(0, 0);}
}

@keyframes t{
  0%{transform:translate(0, 0);}
  20%{transform:translate(0, -10px);}
  40%{transform:translate(0, 0);}
  60%{transform:translate(0, -10px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes n{
  0%{transform:translate(0, 0);}
  50%{transform:skewY(50deg);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}


@media(max-width: 1200px) {
  #content-box {
    width: 100%; 
  }
}