Hello guys in this tutorial we will create advanced button hover animations Html And Css
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Learn More Button Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="row-outer">
<div id="container">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Learn More</span>
</button>
</div>
</div>
</body>
</html>Step:2
Then we need to add code for style.css which code i provide in below screen.
@import url("https://fonts.googleapis.com/css?family=Lato:300,400|PT+Sans:400,700");
* {
padding: 0;
margin: 0
}
body {
font: 500 16px 'Lato', sans-serif;
line-height: 1.5;
display: -webkit-box;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #4b00ff;
overflow: hidden;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #fff;
transition: all 0.5s cubic-bezier(0.60, 0, 0.075, 1);
}
button.learn-more .circle .icon {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
transition: all 0.5s cubic-bezier(0.60, 0, 0.075, 1);
}
button.learn-more .circle .icon.arrow {
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
transition: all 0.5s cubic-bezier(0.60, 0, 0.075, 1);
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: '';
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #4b00ff;
border-right: 0.125rem solid #4b00ff;
transform: rotate(45deg);
}
button.learn-more .button-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #fff;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
transition: all 0.5s cubic-bezier(0.60, 0, 0.075, 1);
}
button:hover .circle {
width: 100%;
}
button:hover .circle .icon.arrow {
transform: translate(1rem, 0);
}
.learn-more:hover .button-text {
color: #4b00ff;
}