Hello friends , I am Hariom Acharya . I am a member of TechTurtles . Our team writes blogs on different topics like trending technologies, tricks of programming language, After effects, etc.
Today I’ll explain how you can make an amazing hover effect using html, css and javascript. I am also providing this code so you can try it yourself. I hope you will enjoy it. For more updates subscribe to our blog.
Watch this video. This is how it’ll look on “Mouse Hover”.
FOLLOW THESE STEPS :
- In
html we first declare four <span> tags .
- Link
css code in head section.
- You
can set background and body property as per your wish. Set
appropriate margin ,padding.
- For
making light effect we are using box-shadow
attribute in anchor tag .
- Then
we put hover effect in anchor tag.
- We
use linear –gradient effect for moving
line around the button .
- Then
we use span tag with nth-child() so we can give different effects
to each side of button.
- At
last we use transition attribute for
after how many second our effect will
run.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
HARIOM
</a>
</body>
</html>
EXTERNAL CSS CODE:
body
{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #031321;
font-family: consolas;
}
a
{
position: relative;
display: inline-block;
padding: 15px 30px;
color: #2196f3;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 24px;
text-decoration: none;
overflow: hidden;
transition: 0.2s;
}
a:hover
{
color : #255784 ;
background :#329ff8 ;
box-shadow : 0 0 10px #329ff8 ,0 0 40px #329ff8 ,0 0 80px #329ff8 ;
transition-delay: 1s;
}
a span
{
position: absolute;
display: block;
}
a span:nth-child(1)
{
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#2196f3);
}
a:hover span:nth-child(1)
{
left: 100%;
transition: 1s;
}
a span:nth-child(2)
{
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#2196f3);
}
a:hover span:nth-child(2)
{
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
a span:nth-child(3)
{
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#2196f3);
}
a:hover span:nth-child(3)
{
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(4)
{
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#2196f3);
}
a:hover span:nth-child(4)
{
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
If you enjoyed this blog, I'd be very grateful if you share this blog to your friends, family and others or share it on Social Media Sites. Till then take care of yourself and Peace !!
SUBSCRIBE FOR MORE BLOGS......
TEASER OF AN UPCOMING BLOG.
Stay tuned for more !!
AUTHOR :
@HARIOM ACHARYA
©TechTurtles
Very Nice!👍
ReplyDeleteNice blog and good explanation
ReplyDeleteIt's really good ... Well dobe
ReplyDelete