<!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;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
