How To Create a Buttons Text Flip With Hover Effects Using CSS Part-2

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

Using css styles here we are going to create Buttons Change With Hover Effects Using Css. Here we use text flip animation hover effects. here we make button animation with text flip .

How To Create a Buttons Text Flip With 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;
}
.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 tow</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: no-repeat;
            vertical-align: middle;
            -webkit-backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            border: 2px solid #000;
            border-radius: 40px;
            letter-spacing: 0.6px;
            font-weight: 600;
            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;
            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: #3f51b5;
            -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: 14px 0px;
            -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: #3f51b5;
            background-color: rgba(63, 81, 181, 0.1);
        }
        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">
        <h2>Button left and right Animation</h2>
        <h2>hover</h2>
        <div class="button">
            <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="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>

Related Post

How Many Types Of Selectors Are There In CSS
How Do you Use max Width In CSS
How To Create a Button Inside Text Slider Hover Effects Using Css
How To Create a Button Flip Animation With Hover Effects Using Css Part-2
How To Create a Animated Buttons Text Flip With Hover Effects Using CSS
How To Create a Buttons Text Flip With Hover Effects Using CSS Part-1
How To Create a Button Inside Text Animation Hover Effects Using CSS Part-1
How To Create a Button Inside Text Animation Hover Effects Using CSS Part-2
How To Create a Button Inside Text Animation Hover Effects Using CSS part-3