Animations

In this example below you will see how to do a Animations with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by craig-potter, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright craig-potter ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animations</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <h1>Animation Examples</h1>
    <hr>
    <h2>Arrows</h2>
    <div class="arrow-up-container">

    	<!-- Up Arrow 1 -->

    	<a class="scroll-up">
    		<span class="left-bar"></span>
    		<span class="right-bar"></span> 
    		<svg width="40" height="40">
    			<line class="top" x1="0" y1="0" x2="120" y2="0"/>
    			<line class="left" x1="0" y1="40" x2="0" y2="-80"/>
    			<line class="bottom" x1="40" y1="40" x2="-80" y2="40"/>
    			<line class="right" x1="40" y1="0" x2="40" y2="1200"/>
    		</svg>
    	</a>

    	<!-- Up Arrow 2 -->

    	<a class="arrow-up">
    		<span class="left-arm"></span>
    		<span class="right-arm"></span>
    		<span class="arrow-slide"></span>
    	</a>
    </div>
    
      

    <div class="w-100 mt-5"></div>
    <h2>Animated Backgrounds</h2>
    <div class="assurance-wrap">
    	<div class="assurance container">
    		<div class="assurance-row row justify-content-center my-sm-2 my-md-5">
    			<div class="assurance-section col-12 col-xl-6 text-center text-xl-left">
    				<h3 class="title">
    					Some Content Here 
    				</h3>
    				
    				<div class="shadow"></div>
    			</div>

</div>
</div>
</div>

<div class="w-100 mt-5"></div>
<h2>Animated Buttons</h2>

<div class="button-container d-flex justify-content-center align-items-center bg-dark p-5">
  <a href="#" class="btn btn-primary m-2"><i class="fas fa-phone"></i></a>
  <a href="#" class="btn btn-success m-2">Book Now <i class="fas fa-calendar"></i></a>
</div>
  <div class="w-100 mt-5"></div>
  <div class="arrow bounce">

  </div>
  <script src='https://use.fontawesome.com/releases/v5.0.6/js/all.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/craig-potter/animations-eVrORK */
/********* Colours: General Purpose **************/
/********* Backgrounds ****************/
body.gallery .content-wrap, body.timeline .content-wrap {
  background: #fff;
  background: linear-gradient(180deg, #fff 0%, #f2f2f2 80%);
  background: -moz-linear-gradient(270deg, #fff 0%, #f2f2f2 80%);
}

/********* Textures ****************/
.scroll-up {
  height: 40px;
  width: 40px;
  display: block;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  cursor: pointer;
}
.scroll-up svg line {
  stroke-width: 1;
  stroke: #aaa;
  fill: none;
  stroke-dasharray: 20;
  transition: all .4s ease;
}
.scroll-up:hover svg line.top {
  -webkit-transform: translateX(-40px);
  transform: translateX(-40px);
}
.scroll-up:hover svg line.bottom {
  -webkit-transform: translateX(40px);
  transform: translateX(40px);
}
.scroll-up:hover svg line.left {
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}
.scroll-up:hover svg line.right {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
}

.scroll-up .left-bar {
  position: absolute;
  z-index: 1;
  background-color: transparent;
  top: 19px;
  left: 5px;
  width: 18px;
  display: block;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.scroll-up .left-bar:after {
  content: "";
  background-color: #666;
  width: 18px;
  height: 1px;
  display: block;
  border-radius: 1px;
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
  -webkit-transform-origin: right center;
          transform-origin: right center;
  z-index: -1;
}
.scroll-up .right-bar {
  position: absolute;
  z-index: 1;
  background-color: transparent;
  top: 19px;
  left: 17px;
  width: 18px;
  display: block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 2px;
}
.scroll-up .right-bar:after {
  content: "";
  background-color: #666;
  width: 18px;
  height: 1px;
  display: block;
  border-radius: 1px;
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  z-index: -1;
}
.scroll-up:hover {
  transition: all .1s;
}
.scroll-up:hover .left-bar:after {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.scroll-up:hover .right-bar:after {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}

.arrow-up {
  height: 40px;
  width: 40px;
  display: block;
  border: 1px solid #666;
  position: relative;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
  overflow: hidden;
}

.arrow-slide {
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: #666;
  position: absolute;
  display: block;
  z-index: 0;
}

.left-arm {
  position: absolute;
  z-index: 1;
  background-color: transparent;
  top: 19px;
  left: 3px;
  width: 20px;
  display: block;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.left-arm:after {
  content: "";
  background-color: #666;
  width: 20px;
  height: 1px;
  display: block;
  border-radius: 1px;
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
  -webkit-transform-origin: right center;
          transform-origin: right center;
  z-index: -1;
}

.right-arm {
  position: absolute;
  z-index: 1;
  background-color: transparent;
  top: 19px;
  left: 17px;
  width: 20px;
  display: block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 2px;
}
.right-arm:after {
  content: "";
  background-color: #666;
  width: 20px;
  height: 1px;
  display: block;
  border-radius: 1px;
  transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 1.5);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  z-index: -1;
}

.arrow-up:hover {
  transition: all .1s;
}
.arrow-up:hover .left-arm:after {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.arrow-up:hover .right-arm:after {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
.arrow-up:hover .arrow-slide {
  transition: all .4s ease-in-out;
  -webkit-transform: translateY(200%);
          transform: translateY(200%);
}

.arrow-up {
  margin-left: -100px;
}

.arrow-up-container, .bounce-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #111;
  min-height: 150px;
}

.bounce-container {
  font-size: 2rem;
}
.bounce-container a {
  color: #fff;
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
body {
  background: black;
}

.arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
}

.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-webkit-keyframes assurance-bg {
  0% {
    background-position-y: 800px;
  }
  100% {
    background-position-y: 0px;
  }
}

@keyframes assurance-bg {
  0% {
    background-position-y: 800px;
  }
  100% {
    background-position-y: 0px;
  }
}
.assurance-wrap {
  background-color: #e6e6e6;
  position: relative;
  background: url(https://www.emailmarketingbrilliance.co.uk/images/email_background_repeat.png) repeat;
  background-repeat: repeat !important;
  background-attachment: fixed;
  -webkit-animation: assurance-bg 29s cubic-bezier(0, 0, 1, 1) infinite;
          animation: assurance-bg 29s cubic-bezier(0, 0, 1, 1) infinite;
}
.assurance-wrap:before, .assurance-wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}
.assurance-wrap:before {
  z-index: -2;
}
.assurance-wrap:after {
  z-index: -1;
  background: url(https://www.emailmarketingbrilliance.co.uk/images/email_background_repeat_overlay.png) repeat;
  background-repeat: repeat !important;
  background-position-x: 500px;
  background-attachment: fixed;
  -webkit-animation: assurance-bg 15s cubic-bezier(0, 0, 1, 1) infinite;
          animation: assurance-bg 15s cubic-bezier(0, 0, 1, 1) infinite;
}

.assurance {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 4rem;
  overflow: hidden;
}
.assurance .assurance-section {
  position: relative;
  min-height: 40vh;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.assurance .assurance-section .title {
  font-style: italic;
  color: #92031F;
  margin: 0 0 1rem 1rem;
  font-size: 1.5em;
}
.assurance .assurance-section ul {
  position: relative;
  list-style-type: none;
  padding: 0;
  padding-left: 3.5em;
}
.assurance .assurance-section ul li {
  padding-bottom: 0.8em;
}
.assurance .assurance-section ul li .fa {
  position: absolute;
  left: 0.75em;
  color: #193b5d;
  font-size: 1.5em;
  vertical-align: middle;
}
.assurance .assurance-section ul li p {
  position: relative;
  top: 0.25em;
  margin-bottom: 0.25rem;
}
.assurance .assurance-section:first-child {
  border-right: 0;
}
.assurance .assurance-section:last-child {
  border-left: 0;
}
.assurance .assurance-section .testimonials .testimonial {
  display: none;
  text-align: center;
}
.assurance .assurance-section .testimonials .testimonial .cycle-slide {
  display: block;
}
.assurance .assurance-section .testimonials .testimonial .title {
  margin: 0;
  font-size: 1.2em;
  font-style: normal;
  color: #193b5d;
}
.assurance .assurance-section .testimonials .testimonial .content {
  font-style: italic;
  font-size: 1em !important;
  line-height: 1.35;
  color: #193b5d !important;
}
.assurance .assurance-section .testimonials .testimonial .content:before, .assurance .assurance-section .testimonials .testimonial .content:after {
  content: '"';
}
.assurance .assurance-section .testimonials .testimonial .author {
  font-size: 0.9em;
  font-weight: bold;
}

.button-container {
  /* Global Button Styles */
  /* Victoria Buttons */
  /* Sandy Buttons */
  /* Gibson Buttons */
  /* Thar Buttons */
}
.button-container a.animated-button:link, .button-container a.animated-button:visited {
  position: relative;
  display: block;
  margin: 30px auto 0;
  padding: 14px 15px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .08em;
  border-radius: 0;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s ease;
}
.button-container a.animated-button:link:after, .button-container a.animated-button:visited:after {
  content: "";
  position: absolute;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 150%;
  z-index: -1;
  transition: all 0.75s ease 0s;
}
.button-container a.animated-button:link:hover, .button-container a.animated-button:visited:hover {
  color: #FFF;
  text-shadow: none;
}
.button-container a.animated-button:link:hover:after, .button-container a.animated-button:visited:hover:after {
  height: 450%;
}
.button-container a.animated-button:link, .button-container a.animated-button:visited {
  position: relative;
  display: block;
  margin: 30px auto 0;
  padding: 14px 15px;
  color: #fff;
  font-size: 14px;
  border-radius: 0;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .08em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s ease;
}
.button-container a.animated-button.victoria-one {
  border: 2px solid #D24D57;
}
.button-container a.animated-button.victoria-one:after {
  background: #D24D57;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
.button-container a.animated-button.victoria-two {
  border: 2px solid #D24D57;
}
.button-container a.animated-button.victoria-two:after {
  background: #D24D57;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
.button-container a.animated-button.victoria-three {
  border: 2px solid #D24D57;
}
.button-container a.animated-button.victoria-three:after {
  background: #D24D57;
  opacity: .5;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.button-container a.animated-button.victoria-three:hover:after {
  height: 140%;
  opacity: 1;
}
.button-container a.animated-button.victoria-four {
  border: 2px solid #D24D57;
}
.button-container a.animated-button.victoria-four:after {
  background: #D24D57;
  opacity: .5;
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
.button-container a.animated-button.victoria-four:hover:after {
  opacity: 1;
  height: 600% !important;
}
.button-container a.animated-button.sandy-one {
  border: 2px solid #AEA8D3;
  color: #FFF;
}
.button-container a.animated-button.sandy-one:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.button-container a.animated-button.sandy-one:hover:after {
  height: 120% !important;
  opacity: 1;
  color: #FFF;
}
.button-container a.animated-button.sandy-two {
  border: 2px solid #AEA8D3;
  color: #FFF;
}
.button-container a.animated-button.sandy-two:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
  transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
.button-container a.animated-button.sandy-two:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
.button-container a.animated-button.sandy-three {
  border: 2px solid #AEA8D3;
  color: #FFF;
}
.button-container a.animated-button.sandy-three:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
.button-container a.animated-button.sandy-three:hover:after {
  height: 400% !important;
  opacity: 1;
  color: #FFF;
}
.button-container a.animated-button.sandy-four {
  border: 2px solid #AEA8D3;
  color: #FFF;
}
.button-container a.animated-button.sandy-four:after {
  border: 3px solid #AEA8D3;
  opacity: 0;
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
  transform: translateY(-50%) translateX(-50%) rotate(25deg);
}
.button-container a.animated-button.sandy-four:hover:after {
  height: 400% !important;
  opacity: 1;
  color: #FFF;
}
.button-container a.animated-button.gibson-one {
  border: 2px solid #65b37a;
  color: #FFF;
}
.button-container a.animated-button.gibson-one:after {
  opacity: 0;
  background-image: -moz-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-size: 10px 10px;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
.button-container a.animated-button.gibson-one:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
.button-container a.animated-button.gibson-two {
  border: 2px solid #65b37a;
  color: #FFF;
}
.button-container a.animated-button.gibson-two:after {
  opacity: 0;
  background-image: -moz-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-size: 10px 10px;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
  transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
.button-container a.animated-button.gibson-two:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
.button-container a.animated-button.gibson-three {
  border: 2px solid #65b37a;
  color: #FFF;
}
.button-container a.animated-button.gibson-three:after {
  opacity: 0;
  background-image: -moz-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-size: 10px 10px;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.button-container a.animated-button.gibson-three:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
.button-container a.animated-button.gibson-four {
  border: 2px solid #65b37a;
  color: #FFF;
}
.button-container a.animated-button.gibson-four:after {
  opacity: 0;
  background-image: -moz-linear-gradient(transparent 50%, rgba(101, 179, 122, 0.2) 50%);
  background-size: 10px 10px;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.button-container a.animated-button.gibson-four:hover:after {
  height: 600% !important;
  opacity: 1;
  color: #FFF;
}
.button-container a.animated-button.thar-one {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.button-container a.animated-button.thar-one:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: none;
}
.button-container a.animated-button.thar-one:hover:before {
  bottom: 0%;
  top: auto;
  height: 100%;
}
.button-container a.animated-button.thar-one:before {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.button-container a.animated-button.thar-two {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.button-container a.animated-button.thar-two:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: ntwo;
}
.button-container a.animated-button.thar-two:hover:before {
  top: 0%;
  bottom: auto;
  height: 100%;
}
.button-container a.animated-button.thar-two:before {
  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.button-container a.animated-button.thar-three {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.button-container a.animated-button.thar-three:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: nthree;
}
.button-container a.animated-button.thar-three:hover:before {
  left: 0%;
  right: auto;
  width: 100%;
}
.button-container a.animated-button.thar-three:before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.button-container a.animated-button.thar-four {
  color: #fff;
  cursor: pointer;
  display: block;
  position: relative;
  border: 2px solid #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.button-container a.animated-button.thar-four:hover {
  color: #000 !important;
  background-color: transparent;
  text-shadow: nfour;
}
.button-container a.animated-button.thar-four:hover:before {
  right: 0%;
  left: auto;
  width: 100%;
}
.button-container a.animated-button.thar-four:before {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #F7CA18;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.button-container a {
  transition: all 0.5s;
}
.button-container a:hover {
  font-size: 1.5rem;
}

h1, h2 {
  color: #fff;
}

Comments