Back

How to create information hover button

Simple tutorial on how to create a button that increases on hover and changes text, using only HTML and CSS.

HTML

For HTML we have a button with two spans inside, "i" and "nfo". "Nfo" will be displayed on button hover.


        <button>
          <span>i</span>
          <span class="nfo">NFO</span>
        </button>

CSS

For CSS, first we'll style the button. We'll set some colors, remove border, width and height to 30px with border radius to 15px will create a circle. Using flexbox, we'll position elements in center and add transition so that hover effect, which we'll ad later, is nice and smooth.


        button {
            border: none;
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: rgb(255, 128, 0);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .3s;
        }

To "nfo" class, we'll set width and opacity to zero and transition to 300 milliseconds.


        .nfo {
            width: 0px;
            transition: .3s;
            opacity: 0;
        }

On button hover, we'll select the "nfo" class and set width to 20px, opacity back to 1 and, of course, the transition , so that this width change is smooth.


        button:hover .nfo {
            width: 20px;
            transition: .3s;
            opacity: 1;
        }

Lastly, the button element on hover, we'll just increase width and set transition.


        button:hover {
            width: 80px;
            transition: .3s;
        }

And that is it.

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

<button>
  <span>i</span>
  <span class="nfo">NFO</span>
</button>

<style>
button {
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: rgb(255, 128, 0);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .3s;
}
.nfo {
  width: 0px;
  transition: .3s;
  opacity: 0;
}
button:hover .nfo {
  width: 20px;
  transition: .3s;
  opacity: 1;
}
button:hover {
  width: 80px;
  transition: .3s;
}
</style>

Thank you for reading this article.

How to create information hover button

HTML

CSS

Video tutorial

Whole code

More buttons

Similar

See also