animation hover button css
This video is about animation hover button effects on CSS, Some introduction about it below
Youtube video watch it;
Mastering Animation Hover Buttons with CSS: A Guide to Enhance User Experience
- Html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial
-scale=1.0">
<link rel="stylesheet" href="stle.css">
<title>Document</title>
</head>
<body>
<h1>Animation world</h1>
<p>Hover us and enjoy the statisfying neumorphic
animation designs !</p>
<div class="frame">
<button class="custom-btn btn-1"><span>Click!</span>
<span>Read More</span></button>
</div>
<p> Animation world(Skill beginner)</p>
</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: 130px;
height: 40px;
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;
}
/* 12 */
.btn-1{
position: relative;
right: 20px;
bottom: 20px;
border:none;
box-shadow: none;
width: 130px;
height: 40px;
line-height: 42px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-1 span {
background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%,
rgba(2,126,251,1) 100%);
display: block;
position: absolute;
width: 130px;
height: 40px;
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);
border-radius: 5px;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-1 span:nth-child(1) {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-1 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-1:hover span:nth-child(1) {
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);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-1:hover span:nth-child(2) {
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);
color: transparent;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
Just copy it on your project
And Don't forget to Subscribe To my youtube channel link
Subscribe me
Tags:
button
