Add friend button - A step-by-step guide

HTML

For HTML, we'll need a div element with two spans inside. One with "+" text and one with "Add Friend" text.

Now we'll set classes, "button" to div element, "plus" to span element with "+" text and "text" class to span element that has "Add Friend" text.

<div class="button">
    <span class="plus">+</span>
    <span class="text">Add Friend</span>
</div>

CSS

For CSS, first, we'll style div element with class "button".

We'll set some basic styling, background, border, color...

We'll set width and height to 50 pixels which form a circle with 25 pixels of border radius.

Using flexbox, we'll align elements in center.

Now we'll add a little transition, hide everything that overflows and set cursor to pointer.

.button {
    background-color: rgb(78, 180, 203);
    width: 50px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
}

As for out span elements, we'll set position to absolute and add a little transition.

.plus, .text {
    position: absolute;
    transition: .3s;
}

On div hover, we'll set it's width to 100px and transition to 300 ms.

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

On div hover, we'll hide the span element with "+" text, by setting opacity to zero.

We'll also set transition, so that it disappears smoothly.

.button:hover .plus {
    opacity: 0;
    transition: .3s;
}

To element that has "Add Friend" text, we'll set opacity to zero. This element will appear on div hover (when plus sign disappears).

.text {
    opacity: 0;
}

On div hover, we'll set opacity to one, on span with "text" class.

With a little transition, this will appear smoothly.

.button:hover .text {
    opacity: 1;
    transition: .3s;
}

And that is it.

You can find full code and video tutorial here.

Thanks for reading. ❤️