| Server IP : 104.21.21.239 / Your IP : 216.73.216.191 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&family=Roboto+Mono&family=Hammersmith+One&family=Playfair+Display:wght@700&family=Yusei+Magic&family=Arima+Madurai:wght@300&family=Poppins:wght@600&family=B612&family=Alfa+Slab+One&family=Inter&family=Handlee&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Link Hovers | Canvas</title>
<style>
.font-family-roboto-mono {
font-family: 'Roboto Mono', monospace;
}
.font-family-hammersmith-one {
font-family: 'Hammersmith One', sans-serif;
}
.font-family-playfair {
font-family: 'Playfair Display', serif;
}
.font-family-yusei {
font-family: 'Yusei Magic', sans-serif;
}
.font-family-arima-madurai {
font-family: "Arima Madurai", cursive;
}
.font-family-poppins {
font-family: Poppins, sans-serif;
}
.font-family-b612 {
font-family: B612, sans-serif;
}
.font-family-alfa {
font-family: "Alfa Slab One", cursive;
}
.font-family-inter {
font-family: Inter, sans-serif;
}
.font-family-handlee {
font-family: Handlee, cursive;
}
.font-family-handlee {
font-family: Handlee, cursive;
}
.d-grid {
display: grid;
width: 100%;
margin: 0 auto;
padding: 10vh 0;
max-width: 1050px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: 200px;
grid-gap: 2rem;
justify-content: center;
list-style: none;
}
.d-grid-item {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background: #FBFBFB;
}
/* Links */
.link {
position: relative;
cursor: pointer;
white-space: nowrap;
color: #333;
font-size: 1.125rem;
font-family: 'Roboto', sans-serif;
}
.link::before,
.link::after {
position: absolute;
width: 100%;
height: 1px;
background: currentColor;
top: 100%;
left: 0;
pointer-events: none;
}
.link::before {
content: '';
/* show by default */
}
/* Links 1 */
.link-1::before {
height: 2px;
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s;
}
.link-1:hover::before {
height: 2px;
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
/* Link 2 */
.link-2::before {
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.link-2:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
.link-2::after {
content: '';
top: calc(100% + 4px);
transform-origin: 0% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.link-2:hover::after {
transform-origin: 100% 50%;
transform: scale3d(1, 1, 1);
transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
/* Link 3 */
.link-3::before {
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.link-3:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 2, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}
.link-3::after {
content: '';
top: calc(100% + 4px);
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);
}
.link-3:hover::after {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}
/* Link 4 */
.link-4 {
overflow: hidden;
line-height: 2;
font-weight: 700;
}
.link-4::before {
height: 2px;
top: calc(100% - 5px);
transform-origin: 0% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}
.link-4:hover::before {
transform: scale3d(1, 1, 1);
}
.link-4::after {
content: attr(data-text);
height: 100%;
top: 0;
background: none;
transform-origin: 100% 50%;
transform: translate3d(150%, 0, 0);
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}
.link-4:hover::after {
transform: translate3d(0, 0, 0);
}
.link-4 span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}
.link-4:hover span {
transform: translate3d(-150%, 0, 0);
}
/* Link 5 */
.link-5 {
padding: 0 10px;
letter-spacing: 1px;
text-indent: 1px;
}
.link-5::before {
top: 50%;
height: 2px;
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}
.link-5:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
.link-5 span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}
.link-5:hover span {
transform: scale3d(1.1, 1.1, 1.1);
opacity: .6;
}
/* Link 6 */
.link-6 {
font-size: 1.3rem;
}
.link-6::before {
transform-origin: 50% 100%;
transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}
.link-6:hover::before {
transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}
.link-6 span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.link-6:hover span {
transform: translate3d(0, -2px, 0);
}
/* Link 7 */
.link-7 {
font-weight: 300;
}
.link-7::before,
.link-7::after {
opacity: 0;
transform-origin: 50% 0%;
transform: translate3d(0, 3px, 0);
transition-property: transform, opacity;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1);
}
.link-7:hover::before,
.link-7:hover::after {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
}
.link-7::after {
content: '';
top: calc(100% + 4px);
width: 70%;
left: 15%;
}
.link-7::before,
.link-7:hover::after {
transition-delay: 0.1s;
}
.link-7:hover::before {
transition-delay: 0s;
}
/* Link 8 */
.link-8 {
font-weight: 600;
font-size: 1.25rem;
}
.link-8::before {
height: 10px;
top: 100%;
opacity: 0;
}
.link-8:hover::before {
opacity: 1;
animation: lineUp 0.3s ease forwards;
}
@keyframes lineUp {
0% {
transform-origin: 50% 100%;
transform: scale3d(1, 0.045, 1);
}
50% {
transform-origin: 50% 100%;
transform: scale3d(1, 1, 1);
}
51% {
transform-origin: 50% 0%;
transform: scale3d(1, 1, 1);
}
100% {
transform-origin: 50% 0%;
transform: scale3d(1, 0.045, 1);
}
}
.link-8::after {
content: '';
transition: opacity 0.3s;
opacity: 0;
transition-delay: 0s;
}
.link-8:hover::after {
opacity: 1;
transition-delay: 0.3s;
}
/* Link 9 */
.link-9 {
font-weight: 700;
}
.link-9::before {
transform-origin: 0% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s;
}
.link-9:hover::before {
transform: scale3d(1, 1, 1);
}
.link-9::after {
content: '';
top: calc(100% + 4px);
transition: transform 0.3s;
transform-origin: 100% 50%;
}
.link-9:hover::after {
transform: scale3d(0, 1, 1);
}
/* Link 10 */
.link-10 {
font-size: 1.25rem;
font-weight: bold;
}
.link-10:hover span {
animation: glitchText 0.4s linear;
}
@keyframes glitchText {
0% {
opacity: 1;
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
10% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
20% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
35% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
50% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
60% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
70% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
80% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
90% {
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
.link-10::before {
height: 2px;
opacity: 0;
}
.link-10:hover::before {
opacity: 1;
animation: glitchLine 0.4s steps(2, start) forwards;
}
@keyframes glitchLine {
0% {
transform: scale3d(1, 1, 1);
}
10% {
transform: translate3d(10px, 0, 0);
}
20% {
transform: translate3d(0, 4px, 0);
}
30% {
transform: scale3d(0.1, 1.4, 1) translate3d(0, -25px, 0);
transform-origin: 100% 0%;
}
40% {
transform: scale3d(1, 0.3, 1) translate3d(0, 25px, 0);
}
50% {
transform: scale3d(0.5, 0.3, 1) translate3d(-100px, -80px, 0);
}
60% {
transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0);
}
70% {
transform: scale3d(0.5, 0.5, 1) translate3d(0, 20px, 0);
}
80% {
transform: translate3d(-30, 10px, 0) scale3d(1, 0.4, 1);
transform-origin: 100% 0%;
}
90% {
transform: scale3d(1, 0.5, 1) translate3d(0, -15px, 0);
;
transform-origin: 0% 50%;
}
100% {
opacity: 1;
}
}
/* Link 11 */
.link-11 {
font-size: 0.925rem;
letter-spacing: 1px;
}
.link-11::before {
height: 100%;
top: 0;
opacity: 0;
}
.link-11:hover::before {
opacity: 1;
animation: coverUp 0.3s ease forwards;
}
@keyframes coverUp {
0% {
transform-origin: 50% 100%;
transform: scale3d(1, 0.045, 1);
}
50% {
transform-origin: 50% 100%;
transform: scale3d(1, 1, 1);
}
51% {
transform-origin: 50% 0%;
transform: scale3d(1, 1, 1);
}
100% {
transform-origin: 50% 0%;
transform: scale3d(1, 0.045, 1);
}
}
.link-11::after {
content: '';
transition: opacity 0.3s;
}
.link-11:hover::after {
opacity: 0;
}
/* Link 12 */
.link-12 {
overflow: hidden;
padding: 7px 0;
}
.link__graphic {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
fill: none;
stroke: currentColor;
stroke-width: 1px;
}
.link__graphic--slide {
top: -3px;
stroke-width: 2px;
transition: transform 0.7s;
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.link:hover .link__graphic--slide {
transform: translate3d(-66.6%, 0, 0);
}
/* Link 13 */
.link-13 {
font-size: 1.25rem;
}
.link-13::before {
display: none;
}
.link__graphic--stroke path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.link:hover .link__graphic--stroke path {
stroke-dashoffset: 0;
}
/* Trick from https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/ */
.link__graphic--arc {
top: 73%;
left: -23%;
}
.link__graphic--arc path {
transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.link:hover .link__graphic--arc path {
transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
transition-duration: 0.3s;
}
.link-14 {
font-size: 1.35rem;
}
.link-14::before {
display: none;
}
.link__graphic--scribble {
top: 100%;
}
.link__graphic--scribble path {
transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.link:hover .link__graphic--scribble path {
transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
transition-duration: 0.3s;
}
/* Link 15 */
.link-15 {
font-weight: bold;
}
.link-15::before {
height: 7px;
border-radius: 20px;
transform: scale3d(1, 1, 1);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53);
}
.link-15:hover::before {
transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
transition-duration: 0.4s;
opacity: 1;
transform: scale3d(1.2, 0.1, 1);
}
.link-15 span {
transform: translate3d(0, -4px, 0);
display: inline-block;
transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53);
}
.link-15:hover span {
transform: translate3d(0, 0, 0);
transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
transition-duration: 0.4s;
transition-delay: 0s;
}
</style>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container">
<div class="text-center" style="font-family: 'Roboto Mono', monospace;">
<h2 class="mb-2">CSS Line Hover Styles for Links</h2>
<p class="op-06 mb-3">A collection of simple and subtle CSS-only line hover animations for links.</p>
</div>
<div class="d-grid">
<div class="d-grid-item">
<a href="#" class="link link-1">Hover Styles</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-2 font-family-roboto-mono text-lowercase">Learn More</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-3 font-family-hammersmith-one text-uppercase">Hover Link</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-4 font-family-playfair" data-text="Our Portfolio">
<span>Our Portfolio</span>
</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-5 text-uppercase font-family-yusei">
<span>Remove</span>
</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-6">
<span>Download</span>
</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-7 font-family-arima-madurai">Read More</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-8 font-family-poppins">Portfolio</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-9 text-uppercase font-family-b612">Blog</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-10">
<span>Glitch</span>
</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-11 text-uppercase">Expore Now</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-12 font-family-alfa">
<span>Learn more</span>
<svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
</svg>
</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-13 font-family-inter">
<span>Sign up</span>
<svg class="link__graphic link__graphic--stroke link__graphic--arc" width="100%" height="18" viewBox="0 0 59 18"><path d="M.945.149C12.3 16.142 43.573 22.572 58.785 10.842" pathLength="1"></svg>
</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-14 font-family-handlee">
<span>Writings</span>
<svg class="link__graphic link__graphic--stroke link__graphic--scribble" width="100%" height="9" viewBox="0 0 101 9"><path d="M.426 1.973C4.144 1.567 17.77-.514 21.443 1.48 24.296 3.026 24.844 4.627 27.5 7c3.075 2.748 6.642-4.141 10.066-4.688 7.517-1.2 13.237 5.425 17.59 2.745C58.5 3 60.464-1.786 66 2c1.996 1.365 3.174 3.737 5.286 4.41 5.423 1.727 25.34-7.981 29.14-1.294" pathLength="1"></svg>
</a>
</div>
<div class="d-grid-item">
<a href="#" class="link link-15"><span>Contact</span></a>
</div>
</div>
<div class="text-center" style="font-family: 'Roboto Mono', monospace;">
<a href="https://tympanus.net/Development/LineHoverStyles/" class="text-black-50"><u>Credits</u></a>
</div>
</div>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/functions.js"></script>
</body>
</html>