animation hover | css button hover effect | css button hover animation
This video is about how to create an animation hover button in only CSS. And I tell all about clearly very that I use class and other elements. And play the background with sweet music. Watch this video
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=
Lato&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Documents</title>
</head>
<body>
<h1>Animation Buttons</h1>
<p>Hover us and enjoy the satisfying neumorphic
animation designs!</p>
<div class="frame">
<button class="custom-btn btn-1">Read More</button>
<p style="font-family: Andale Mono, monospace;">
Animation world(Skill Beginner)</p>
</div>
</body>
</html>
CSS
body
{
background: #e0e5ec;
}
h1
{
position:relative;
text-align: center;
color: #353535;
font-size: 50px;
font-family: "Cormorant Garamound",sans-serif;
}
p{
font-family: 'Lato',sans-serif;
font-weight: 300;
text-align: center;
font-size: 18px;
color: #676767;
}
.frame
{
width: 90%;
margin: 40px auto;
text-align: center;
}
button
{
margin: 20px;
}
.custom-btn
{
width: 305px;
height: 50px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato',sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 3.0s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,5),
7px, 7px 7px 20px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}
/* 14 */
.btn-1 {
background: rgb(255,151,0);
border: none;
z-index: 1;
}
.btn-1:after {
position: absolute;
content: "";
width: 100%;
height: 0;
top: 0;
left: 0;
z-index: -1;
border-radius: 5px;
background-color: #eaf818;
background-image: linear-gradient(315deg, #eaf818 0%,
#f6fc9c 74%);
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
transition: all 0.3s ease;
}
.btn-1:hover {
color: #000;
}
.btn-1:hover:after {
top: auto;
bottom: 0;
height: 100%;
}
.btn-1:active {
top: 2px;
}
Just copy it on your project
And Don't forget to Subscribe To my youtube channel link
Subscribe me
Tags:
button
