Hover to change the style with CSS

[puddlejumper26]

add underline, box, and shine effects

take from code pen

<div class="wrapper">
  <h1 align="center"><a href="#" class="effect-underline">underline</a></h1>
  <h1 align="center"><a href="#" class="effect-box">box</a></h1>
  <h1 align="center"><a href="#" class="effect-shine">shine</a></h1>
</div>

body {
  background-color:#222;
}

.wrapper {
  display: block;
  position: absolute;
}

h1 a {
  color: #fff;
  font-size: 2em;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

/*effect-underline*/
a.effect-underline:after {
    content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 10px;
  opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

a.effect-underline:hover:after {
  opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/*effect-box*/
a.effect-box:after,
a.effect-box:before {
    content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  margin-top: 10px;
  opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;

}

a.effect-box:before {
  border-left: 1px solid;
  border-right: 1px solid;
  -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

a.effect-box:after {
  border-bottom: 1px solid;
  border-top: 1px solid;
  -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

a.effect-box:hover:after,
a.effect-box:hover:before {
  opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* effect-shine */
a.effect-shine:hover {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}

chang the content

<button  id='outside'>
         <p id='pa'><span id='inside'>New</span></p>
</button>

#outside:hover #inside{
  display:none;
}

#outside:hover #pa:after{
  content:'asfasdf';
}

change content with effects

take from code pen

<button class="button" type="button" data-hover="CLICK ME" data-active="I'M ACTIVE">
           <span>HOVER EFFECT</span></button>

body {
    text-align: center;
    background: #00C8FF;
}

/* .button */

.button {
    display: inline-block;
    position: relative;
    margin: 1em;
    padding: 0.67em;
    border: 2px solid #FFF;
    overflow: hidden;
    // text-decoration: none;
    font-size: 2em;
    // outline: none;
    color: #FFF;
    background: transparent;
    font-family: 'raleway', sans-serif;
}

.button span {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.button:before,
.button:after {
    content: '';
    position: absolute;
    top: 0.67em;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transition: .4s,opacity .6s;
    -moz-transition: .4s,opacity .6s;
    -o-transition: .4s,opacity .6s;
    transition: .4s,opacity .6s;
}

/* :before */

.button:before {
    content: attr(data-hover);
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
}

/* :after */

.button:after {
    content: attr(data-active);
    -webkit-transform: translate(150%,0);
    -moz-transform: translate(150%,0);
    -ms-transform: translate(150%,0);
    -o-transform: translate(150%,0);
    transform: translate(150%,0);
}

/* Span on :hover and :active */

.button:hover span,
.button:active span {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

/*  
    We show :before pseudo-element on :hover 
    and :after pseudo-element on :active 
*/

.button:hover:before,
.button:active:after {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

/* 
  We hide :before pseudo-element on :active
*/

.button:active:before {
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

content doesn't support HTML, only text.