How To Make Button With Slider Effect Animation Hover Using CSS Part-3

Posted By Bajarangi soft , Posted On 27-01-2021

Using CSS animation we can also make button with Slider hover effect ,So today we discuss how to do it.

How To Make Button With Slider Effect Animation Hover Using CSS Part-3

Step 1:Create css file like style.css.

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&family=Slabo+27px&display=swap");

*::after,
*::before {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0px;
padding: 0px;
}

ul,
li {
margin: 0px;
padding: 0px;
list-style: none;
font-family: "Roboto", sans-serif;
font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
padding: 0px;
font-weight: 500;
font-family: "Roboto", sans-serif;
font-style: normal;
}

p {
margin: 0px;
padding: 0px;
font-family: "Roboto", sans-serif;
font-style: normal;
}

table,
thead,
tbody,
tr,
th,
td {
font-family: "Roboto", sans-serif;
font-style: normal;
}

hr {
margin: 0px;
padding: 0px;
}

input,
button,
select,
optgroup,
textarea {
font-family: "Roboto", sans-serif;
font-style: normal;
}

a,
strong,
label,
span,
img,
b {
font-family: "Roboto", sans-serif;
transition: all 0.3s ease 0s;
font-style: normal;
}

a,
a:hover,
a:focus,
a:active,
a:link {
outline: none;
text-decoration: none;
color: #000;
}

a.bs-btn:focus {
outline: 0;
box-shadow: none;
}

button.bs-btn:focus {
outline: 0;
box-shadow: none;
}

Step 2:Create html file like button-eight.html and import style.css in it.

<!DOCTYPE html>
<html lang="en">
<head>

<title>animaion button three</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />

<style type="text/css">

button.bs-btn:focus {
outline: 0 !important;
outline-offset: 0;
}

button.bs-btn {
position: relative;
display: inline-block;
min-width: 170px;
max-width: 170px;
padding: 14px 0px;
background: no-repeat;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border: 3px solid #d04a11;
cursor: pointer;
color: #d04a11;
z-index: 1;
margin: 3px 0px;
}
button.bs-btn:after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

button.bs-btn.btn-one {
overflow: hidden;
}

button.bs-btn.btn-one:after {
width: 0;
height: 103%;
top: 50%;
left: 50%;
background: #d04a11;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

button.bs-btn.btn-one:hover,
button.bs-btn.btn-one:active {
color: #fff;
}

button.bs-btn.btn-one:hover:after {
width: 90%;
opacity: 1;
}

button.bs-btn.btn-one:active:after {
width: 101%;
opacity: 1;
}

button.bs-btn.btn-tow {
overflow: hidden;
}

button.bs-btn.btn-tow:after {
width: 100%;
height: 0;
top: 50%;
left: 50%;
background: #d04a11;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

button.bs-btn.btn-tow:hover,
button.bs-btn.btn-tow:active {
color: #fff;
}

button.bs-btn.btn-tow:hover:after {
height: 260%;
opacity: 1;
}

button.bs-btn.btn-tow:active:after {
height: 400%;
opacity: 1;
}

button.bs-btn.btn-three {
overflow: hidden;
}

button.bs-btn.btn-three:after {
width: 101%;
height: 0;
top: 50%;
left: 50%;
background: #d04a11;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

button.bs-btn.btn-three:hover,
button.bs-btn.btn-three:active {
color: #fff;
}

button.bs-btn.btn-three:hover:after {
height: 75%;
opacity: 1;
}

button.bs-btn.btn-three:active:after {
height: 130%;
opacity: 1;
}

@media (max-width: 768px) {
button.bs-btn {
min-width: 150px;
max-width: 150px;
}
}
</style>
</head>
<body>

<div class="container">
<div class="button">
<h2>CSS buttons hover effects</h2>
<button class="bs-btn btn-one">Button</button>
<button class="bs-btn btn-tow">Button</button>
<button class="bs-btn btn-three">Button</button>
</div>
</div>




<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.js"></script>
</body>
</html>