Home » How to Change the Button Text on Hover Using HTML & CSS

How to Change the Button Text on Hover Using HTML & CSS

November 30, 2020

Hey there, Button is one of the most important feature of a website. In this blog, we’ll learn How To change the button text on hover using only HTML & CSS.

If you want to make your page beautiful, using CSS button hover effects is great. It will help improve your users dwell time. The animated buttons will inspire users to see what your website has to offer. Also it helps make your page more dynamic and boosts your brand fame.

This tutorial will show you how to change the button text on hover in html and css. It might look like a gimmick, but if you apply it properly, I am pretty sure it’s handy for your website.

Video Tutorial:

Source Codes:

First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Button Hover</title>
  </head>
  <body>
    <button class="btn">
      <span class="btn__visible"> Thank You </span>
      <span class="btn__invisible"> Welcome </span>
    </button>
  </body>
</html>

Second, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with a .css extension.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url(./bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

.btn {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 100px;
    background-image: linear-gradient(to right, #a50e0e, #e75858);
    cursor: pointer;

    position: relative;
    overflow: hidden;
}

.btn > * {
    display: inline-block;
    height: 100%;
    width: 100%;
    color: #fff;

    transition: all 0.2s;
}

.btn__visible {
    padding: 25px 90px;
}

.btn__invisible {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 25px 0;
}

.btn:hover {
    background-image: linear-gradient(to left, #a50e0e, #e75858);
}

.btn:hover .btn__visible {
    transform: translateY(100%);
}

.btn:hover .btn__invisible {
    top: 0;
}

.btn:focus {
    outline: none;
}