Information hover button - Tutorial

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.

Thanks for reading. ❤️

You can find full code with video tutorial here.