[버튼 효과 모음]

# http://simbyone.com/demo/30-css-hover-effects-for-buttons/

# https://tympanus.net/Development/CreativeButtons/

# https://codepen.io/rauldronca/pen/mEXomp

# http://ianlunn.github.io/Hover/#effects

# https://codepen.io/davidicus/pen/emgQKJ

# https://www.inserthtml.com/demos/css/button-styles/

# https://blog.prototypr.io/stunning-hover-effects-with-css-variables-f855e7b95330

# 메테리얼 효과 : https://bashooka.com/coding/35-cool-floating-action-button-animations/

#https://codepen.io/rauldronca/pen/mEXomp

<!-- Hover #1 -->

<div class="box-1">

  <div class="btn btn-one">

    <span>HOVER ME</span>

  </div>

</div>

 

<!-- Hover #2 -->

<div class="box-2">

  <div class="btn btn-two">

    <span>HOVER ME</span>

  </div>

</div>

<!-- Hover #3 -->

<div class="box-3">

  <div class="btn btn-three">

    <span>HOVER ME</span>

  </div>

</div>

@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';

html,

body {

  width: 100%;

  height: 100%;

  overflow: hidden;

  margin: 0;

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

  font-family: 'Open Sans Condensed', sans-serif;

}

div[class*=box] {

height: 33.33%;

width: 100%; 

  display: flex;

  justify-content: center;

  align-items: center;

}

.box-1 { background-color: #FF6766; }

.box-2 { background-color: #3C3C3C; }

.box-3 { background-color: #66A182; }

.btn {

line-height: 50px;

height: 50px;

text-align: center;

width: 250px;

cursor: pointer;

}

/* 

========================

      BUTTON ONE

========================

*/

.btn-one {

color: #FFF;

transition: all 0.3s;

position: relative;

}

.btn-one span {

transition: all 0.3s;

}

.btn-one::before {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

opacity: 0;

transition: all 0.3s;

border-top-width: 1px;

border-bottom-width: 1px;

border-top-style: solid;

border-bottom-style: solid;

border-top-color: rgba(255,255,255,0.5);

border-bottom-color: rgba(255,255,255,0.5);

transform: scale(0.1, 1);

}

.btn-one:hover span {

letter-spacing: 2px;

}

.btn-one:hover::before {

opacity: 1;

transform: scale(1, 1);

}

.btn-one::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

transition: all 0.3s;

background-color: rgba(255,255,255,0.1);

}

.btn-one:hover::after {

opacity: 0;

transform: scale(0.1, 1);

}

/* 

========================

      BUTTON TWO

========================

*/

.btn-two {

color: #FFF;

transition: all 0.5s;

position: relative;

}

.btn-two span {

z-index: 2;

display: block;

position: absolute;

width: 100%;

height: 100%;

}

.btn-two::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

transition: all 0.5s;

border: 1px solid rgba(255,255,255,0.2);

background-color: rgba(255,255,255,0.1);

}

.btn-two::after {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

transition: all 0.5s;

border: 1px solid rgba(255,255,255,0.2);

background-color: rgba(255,255,255,0.1);

}

.btn-two:hover::before {

  transform: rotate(-45deg);

  background-color: rgba(255,255,255,0);

}

.btn-two:hover::after {

  transform: rotate(45deg);

  background-color: rgba(255,255,255,0);

}

/* 

========================

      BUTTON THREE

========================

*/

.btn-three {

color: #FFF;

transition: all 0.5s;

position: relative;

}

.btn-three::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

background-color: rgba(255,255,255,0.1);

transition: all 0.3s;

}

.btn-three:hover::before {

opacity: 0 ;

transform: scale(0.5,0.5);

}

.btn-three::after {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

opacity: 0;

transition: all 0.3s;

border: 1px solid rgba(255,255,255,0.5);

transform: scale(1.2,1.2);

}

.btn-three:hover::after {

opacity: 1;

transform: scale(1,1);

}