HTML CSSResult Skip Results Iframe
EDIT ON
html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  min-width: 300px;
  min-height: 60px;
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 700;
  color: #313133;
  background: #4FD1C5;
background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
  }

button::before {
content: '';
  border-radius: 1000px;
  min-width: calc(300px + 12px);
  min-height: calc(60px + 12px);
  border: 6px solid #00FFCB;
  box-shadow: 0 0 60px rgba(0,255,203,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.button:hover, .button:focus {
  color: #313133;
  transform: translateY(-6px);
}

button:hover::before, button:focus::before {
  opacity: 1;
}

button::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #00FFCB;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

button:hover::after, button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}
video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background-size: cover;
        position: fixed;
}
.button-images {
max-width: 950px;
margin: 75px auto;
}

.button-container {
position: relative;
text-align: center;
padding: 0;
border-radius:50%; 
overflow:hidden; 
}



.button-container A:before{  
  content: '';
  display: inline-block;
  height: 48%; 
  /* 
  vertical-align:middle; 
  height: 100%;*/
  
 
  }


.button-container a {
  transition: all 1s ease-out;
  background: rgba(255, 255, 255, 0);
   border-radius:50%; vertical-align:middle;
  padding:5%; 
  /*color: #FFFFFF;*/
  color: #000000;
  position:absolute;
  font-size: 1.125em; 
  font-weight: 800; 
  top: 0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  display:inline-block;
  text-decoration: none;
  text-transform:uppercase;
}

.button-container A:hover {
  background: none;
  border: none; 
  opacity:0;
}
.button-container img{width:100%; height:auto; display:block}


/*Columns*/
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
position: relative;
margin-right: 4%;
float: left;
min-height: 1px;
height: auto !important;
}

.one_fourth {
width: 22%;
}

.three_fourth {
width: 74%;
}

.one_fifth {
width: 16.8%;
}

.two_fifth {
width: 37.6%;
}

.three_fifth {
width: 58.4%;
}

.four_fifth {
width: 79.2%;
}

.one_sixth {
width: 13.3333%;
}

.three_sixth {
width: 47.9998%;
}

.five_sixth {
width: 82.6665%;
}

.last {
margin-right: 0 !important;
clear: right;
}

.clearboth {
clear: both;
display: block;
font-size: 0;
height: 0;
line-height: 0;
width: 100%;
}

.spacer {
height: 15px;
}

.one_half .one_half {
margin-right: 8.3333%;
width: 45.8333%;
}

.one_half .one_third {
margin-right: 8.3333%;
width: 27.7778%;
}

.one_half .two_third {
margin-right: 8.3333%;
width: 63.8889%;
}

.two_third .one_third {
margin-right: 6.1224%;
width: 29.2517%;
}

.two_third .two_third {
margin-right: 6.1224%;
width: 64.6258%;
}

.two_third .one_fourth {
margin-right: 6.1224%;
width: 20.4082%;
}

.one_half, .two_fourth {
width: 48%;
}

.one_third, .two_sixth {
width: 30.6666%;
}

.two_third, .four_sixth {
width: 65.3332%;
}