GA Advanced CSS

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>GA Advanced CSS</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway:400,700'>

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

  
</head>

<body>

  <section>
  <a href="#" class="rotate">
    Rotate
  </a>
</section>
<section>
  <a href="#" class="scale-x">
    Scale X
  </a>
</section>
<section>
  <a href="#" class="scale-y">
    Scale Y
  </a>
</section>
<section>
  <a href="#" class="translate-2d">
    2D Translate
  </a>
</section>
<section>
  <a href="#" class="skew">
    <span>Skew</span>
  </a>
</section>
<section>
  <a href="#" class="box multiple">
    Multiple
  </a>
</section>
<section>
  <a href="#" class="perspective">
    <span>Perspective</span>
  </a>
</section>
<section>
  <a href="#" class="translate-3d">
    <span>Translate 3D</span>
  </a>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/stooderrr/ga-advanced-css-dJEOEK */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 600;
}

section {
  justify-content: center;
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
}

a {
  color: #60A3BC;
  text-decoration: none;
  border: 3px solid #60A3BC;
  padding: 15px 90px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s;
  z-index: 10;
  text-transform: uppercase;
}

a:hover {
  color: white;
}

a:before {
  padding: 15px 90px;
  content: "";
  color: white;
  height: 100%;
  width: 100%;
  background-color: #60A3BC;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s;
  z-index: -1;
}

span {
  position: relative;
  z-index: 10;
  color: white;
}

.rotate:before {
  transform: rotate(-90deg);
  transform-origin: 0 100%;
}

.rotate:hover:before {
  transform: rotate(0deg);
}

.scale-x:before {
  transform: scaleX(0);
}

.scale-x:hover:before {
  transform: scaleX(1);
}

.scale-y:before {
  transform: scaleY(0);
}

.scale-y:hover:before {
  transform: scaleY(1);
}

.translate-2d:before {
  transform: translateX(100%);
}

.translate-2d:hover:before {
  transform: translateX(0);
}

.skew:hover:before {
  transform: skewX(-45deg);
}

.multiple:before {
  transform: translateY(100%) scale(1) skew(0deg);
}

.multiple:hover:before {
  transform: translateY(0) scale(0.75) skew(-45deg);
}

.perspective:hover {
  transform: perspective(50px) rotateY(10deg);
}

.translate-3d:hover {
  transform: perspective(200px) translateZ(50px);
}

Comments