How To create Simple Animation Buttons Hover Effects Using Css part-2

admin_img Posted By Bajarangi soft , Posted On 27-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 buttons with hover effects animation buttons.

How To create Simple Animation Buttons Hover Effects Using Css part-2

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 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;
                background: none;
                vertical-align: middle;
                -webkit-backface-visibility: hidden;
                -moz-osx-font-smoothing: grayscale;
                border-color: #37474f;
                border: 1px solid;
                font-weight: 500;
                cursor: pointer;
                color: #37474f;
                z-index: 1;
                margin: 3px 0px;
            }
            button.bs-btn.bs-btn:focus {
                outline: none;
            }
            button.bs-btn.bs-btn > span {
                vertical-align: middle;
            }

            button.bs-btn.btn-hover {
                overflow: hidden;
                padding: 0;
                -webkit-transition: border-color 0.3s, background-color 0.3s;
                transition: border-color 0.3s, background-color 0.3s;
                -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
                transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            }
            button.bs-btn.btn-hover::after {
                content: attr(data-text);
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                opacity: 0;
                color: #fff;
                -webkit-transform: translate3d(0, 25%, 0);
                transform: translate3d(0, 25%, 0);
            }
            button.bs-btn.btn-hover span {
                display: block;
            }
            button.bs-btn.btn-hover::after,
            button.bs-btn.btn-hover > span {
                padding: 12px 10px;
                -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                transition: transform 0.3s, opacity 0.3s;
                -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
                transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            }
            button.bs-btn.btn-hover:hover {
                border-color: rgb(214 94 16);
                background-color: rgb(214 94 16 / 67%);
            }

            button.bs-btn.btn-hover:hover::after {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            button.bs-btn.btn-hover:hover > span {
                opacity: 0;
                -webkit-transform: translate3d(0, -25%, 0);
                transform: translate3d(0, -25%, 0);
            }

            @media (max-width: 768px) { 
                button.bs-btn {
                    min-width: 150px;
                    max-width: 150px;
                } 
            }
        </style>
    </head>
    <body>
        <!-- container -->
        <div class="container">
            <br>
            <h2 class="text-center">How To create Simple Animation Buttons Hover Effects Using Css part-2</h2>
            <div class="button text-center">
                <button class="bs-btn btn-hover" data-text="Open Project"><span>Open Project</span></button>
                <button class="bs-btn btn-hover" data-text="Create New"><span>Create New</span></button>
                <button class="bs-btn btn-hover" data-text="Publish"><span>Publish</span></button>
            </div>
        </div>
        <!-- container end -->

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

Related Post