Hover line effect

Developer
Mori
Size
2,439 Kb
Views
20,240
  1. Hover line effect Previews
  2. Hover line effect HTML Codes
  3. Hover line effect CSS Codes

How do I make an hover line effect?

What is a hover line effect? How do you make a hover line effect? This script and codes were developed by Mori on 26 October 2022, Wednesday.

Hover line effect Previews
IQ Test

Hover line effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hover line effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- use background -->
<a href="#">Hover Me</a>
<br />
<br />
<hr />
<br />
<!-- use linear-gradient -->
<input type="text" value="" placeholder="Focus Me" class="form-group">
<br />
source from material-kit
</body>
</html>

Hover line effect - Script Codes CSS Codes

a { font-size: 50px; color: gray; transition: all 0.8s; position: relative; text-decoration: none;
}
a:after { transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #000; content: ''; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transform-origin: bottom right;
}
a:hover { color: red; transition: all 0.8s;
}
a:hover:after { -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; transform: scaleX(1);
}
/*--------input------------*/
.form-group:focus { background-image: linear-gradient(#9c27b0, #9c27b0); background-size: 100% 2px; transition-duration: 0.3s; outline: none;
}
.form-group { border: 0; background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#666, #666); background-size: 0 2px, 100% 2px; background-repeat: no-repeat; background-position: center bottom; transition: background 0s ease-out; font-size: 35px;
}
Hover line effect - Script Codes
Hover line effect - Script Codes
Home Page Home
Developer Mori
Username moriko232
Uploaded October 26, 2022
Rating 3
Size 2,439 Kb
Views 20,240
Do you need developer help for Hover line effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mori (moriko232) Script Codes
Name
Animate hover effect for products
PACE loadding effect
Sticky menu
Auto zoom in background
FadeToggle
Scroll and change numbers
Hover menu
Menu item hover line effect
Tab menu style
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!