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

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

Using css animation here we have created swipe top or bottom buttons with hover effects animation buttons. Here we make square button with borders swipe hover effect.

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

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>
   <!-- Required meta tags -->
   <title>animaion button hover one</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <!-- Bootstrap CSS -->
        <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;
         padding: 14px 0px;
         background: no-repeat;
         vertical-align: middle;
         -webkit-backface-visibility: hidden;
         -moz-osx-font-smoothing: grayscale;
         border: 3px solid #000;
         border-radius: 0;
         letter-spacing: 1px;
         text-transform: uppercase;
         font-weight: 500;
         font-size: 14px;
         cursor: pointer;
         color: #000;
         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;
         -webkit-transition: color 0.3s;
         transition: color 0.3s;
      }

      button.bs-btn.btn-hover::before,
      button.bs-btn.btn-hover::after {
         content: '';
         position: absolute;
         height: 100%;
         width: 100%;
         bottom: 100%;
         left: 0;
         z-index: -1;
         -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::before {
         background: #000000a8;
      }
      button.bs-btn.btn-hover::after {
         background: #000000;
      }
      button.bs-btn.btn-hover:hover {
         color: #fff;
      }
      button.bs-btn.btn-hover:hover::before,
      button.bs-btn.btn-hover:hover::after {
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0);
      }
      button.bs-btn.btn-hover:hover::after {
         -webkit-transition-delay: 0.175s;
         transition-delay: 0.175s;
      }

      @media (max-width: 768px) {
         button.bs-btn {
            min-width: 150px;
            max-width: 150px;
         }
      }
   </style>
</head>
<body>
   <!-- container -->
   <div class="container">
      <h2>Button Animation</h2>
      <h2>hover</h2>
      <div class="button">
         <button class="bs-btn btn-hover">Next Song</button>
         <button class="bs-btn btn-hover">Hold</button>
         <button class="bs-btn btn-hover">Previous Song</button>
      </div>
   </div>
   <!-- container end -->

 <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
       <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>