cta

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>cta</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <a class="Link" href="#/">
  <span class="Link-title">Call to action</span>
  <svg class="Link-arrow" width="13px" height="10px" viewBox="0 0 13 10">
    <path d="M1,5 L11,5"></path>
    <polyline points="8 1 12 5 8 9"></polyline>
  </svg>
</a>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/vincentorback/cta-ELYozb */
.Link {
  --color: #fc6635;

  display: inline-block;
  position: relative;
  padding: 1.2em 1.6em;
  color: #111;
}

.Link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 28px;
  background: var(--color);
  width: 56px;
  height: 56px;
  transition: opacity 100ms ease, width 200ms ease-in-out;
  opacity: .5;
}

.Link-title {
  position: relative;
  font-weight: bold;
  letter-spacing: .25em;
  text-transform: uppercase;
  vertical-align: middle;
}

.Link-arrow {
  position: relative;
  top: 0;
  margin-left: .5em;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: currentColor;
  stroke-width: 2;
  -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
  transition: -webkit-transform 200ms ease 100ms;
  transition: transform 200ms ease 100ms;
  transition: transform 200ms ease 100ms, -webkit-transform 200ms ease 100ms;
}

.Link:hover::before {
  width: 100%;
}

.Link:hover .Link-arrow {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.Link:active::before {
  opacity: 1;
}






body {
  text-align: center;
  padding-top: 10vh;
}

a {
  text-decoration: none;
}

Comments