DEV Community


Posted on • Originally published at


Information hover button - Tutorial

Information button image


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

    <span class="nfo">NFO</span>
Enter fullscreen mode Exit fullscreen mode


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;
Enter fullscreen mode Exit fullscreen mode

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

.nfo {
    width: 0px;
    transition: .3s;
    opacity: 0;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

button:hover {
    width: 80px;
    transition: .3s;
Enter fullscreen mode Exit fullscreen mode

And that is it.

Thanks for reading. ❤️

You can find full code with video tutorial here.

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git