Button Hover – Typewriter

button-hover-typewriter.markdown

Button Hover – Typewriter

Typewriter like hover effect. CSS only

A Pen by Florian Ludwig on CodePen.

License.

index.html

<div class="wrapper">
  <span id="email">
    <a href="">
      <p>[email protected]</p>
      <span class="cursor">|</span>
      <span class="button">work with us</span>
    </a>
  </span>
</div>

style.css

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

* {
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;  
}

html,body{
	width:100%;
	height:100%;
	overflow:hidden;
  background-color: rgb(19,19,19);
}

.wrapper{
  width:400px;
  height:50px;
  position:absolute;
  top:50%;
  margin-top:-25px;
  left:0;
  right:0;
}

#email{
  font-size:24px;
	color: rgba(255,255,255,.87);
	letter-spacing:.25px;
	font-weight:700;
}

#email .cursor{
	-webkit-transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:         all 600ms cubic-bezier(0.23, 1, 0.32, 1);
	animation: blinker 1s linear infinite;
  color:#f8c332;
}

#email:hover .button{
	opacity:0;
}

#email p {
  width: 0em;
  white-space:nowrap;
  overflow:hidden;
	display:inline-block;
	bottom:-8px;
	position:relative;
}
#email a{
	display:inline-block;
	-webkit-transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:         all 200ms cubic-bezier(0.23, 1, 0.32, 1);
  color: rgba(255,255,255,.87);
  text-decoration:none;
}

#email span{
	display:inline-block;
	position:relative;
}

#email:hover p {
  width: 7.55em;
  white-space:nowrap;
  overflow:hidden;
  -webkit-animation: type .75s steps(40, end);
  animation: type .75s steps(40, end);
}

/*KEYFRAME ANIMATION*/
@keyframes type{
  from { width: 0; }
}

@-webkit-keyframes type{
  from { width: 0; }
}

@keyframes blinker {
  50% { opacity: 0.0; }
}

@-webkit-keyframes blinker{
	50% { opacity: 0.0; }
}

@-moz-keyframes blinker{
	50% { opacity: 0.0; }
}

@-o-keyframes blinker{
	50% { opacity: 0.0; }
}