<div class="button-container">
  <div class="button">
    <div class="button-text">
      hover
    </div>
  </div>
  <div class="button-outline"></div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.button {
  z-index: 99;
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  background-color: #63caff;
  cursor: pointer;
}

.button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.button:hover + .button-outline {
  width: 85%;
}

.button-outline {
  position: absolute;
  width: 75%;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  border: 7px solid #63caff;
  transform: translate(-50%, -50%);
  transition: all 0.25s cubic-bezier(.7, .11, .32, 2);
}

.button-outline:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 96px;
  font-family: "Open Sans", sans-serif;
  color: white;
}

.button-container {
  position: relative;
  margin: 0 auto;
  width: 400px;
}

.button-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

body {
  background-color: #212121;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.