How To Create a Buttons Swipe Animation Hover Effects Using Css Part-5

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

A simple button is elevated using CSS and HTML adding an attractive glow effect,Using css animation here we have created swipe right or left buttons with hover effects animation buttons. Here we make square button swipe hover effect.

How To Create a Buttons Swipe Animation Hover Effects Using Css Part-5

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;
}
.text-center{
color:darkred;
}

Step 2:Create html file and import style.css in it.

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

<title>animaion button hover one</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 {
position: relative;
display: inline-block;
min-width: 170px;
max-width: 170px;
background: none;
vertical-align: middle;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
border: 2px solid #b9121a;
border-radius: 40px;
letter-spacing: 0.3px;
font-weight: 500;
font-size: 15px;
cursor: pointer;
color: #b9121a;
cursor: pointer;
z-index: 1;
margin: 3px 0px;
}
button.bs-btn:focus {
outline: none;
}
button.bs-btn > span {
vertical-align: middle;
}

button.bs-btn.btn-hover {
overflow: hidden;
padding: 0px;
}
button.bs-btn.btn-hover::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:#b9121a;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
color: #fff;
}
button.bs-btn.btn-hover > span {
display: block;
}
button.bs-btn.btn-hover::before,
button.bs-btn.btn-hover > span {
padding: 12px 5px;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
button.bs-btn.btn-hover:hover::before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
button.bs-btn.btn-hover:hover > span {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

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

<div class="container">
<br>
<h2 class="text-center">how-to-create-a-buttons-swipe-animation-hover-effects-using-css-part-5</h2>
<br>
<div class="button text-center">
<button class="bs-btn btn-hover" data-text="Send Message"><span>Send Message</span></button>
<button class="bs-btn btn-hover" data-text="Request a Quote"><span>Request a Quote</span></button>
<button class="bs-btn btn-hover" data-text="Publish Comment"><span>Publish Comment</span></button>
</div>
</div>




<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>