Back

How to create add friend button

Tutorial on how to create a button that shows different text on hover and expands - CSS only.

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.

Video tutorial

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

Whole code

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

<style>
.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;
}

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

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

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

.text {
  opacity: 0;
}

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

</style>

Thank you for reading this article.

How to create add friend button

HTML

CSS

Video tutorial

Whole code

More buttons

Similar

See also