Back

Creating an Intuitive Expandable Social Connection Button

Learn how to build an elegant add friend button that transforms from a plus icon to descriptive text on hover, enhancing user experience with smooth CSS transitions.

HTML

Our HTML structure is elegantly simple: a container div with two text spans that will alternate visibility based on user interaction. The first span with the "plus" class contains the "+" symbol that represents the initial state, while the second span with the "text" class contains "Add Friend" text that will be revealed on hover.

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

CSS

For our button container, we'll create a vibrant, friendly appearance with a bright turquoise background (#4EB4CB) that aligns with typical social media aesthetics. We set the initial dimensions to 50×50 pixels with a border-radius of 25px (half the width), creating a perfect circle—a common pattern for action buttons in modern interfaces. Flexbox centering ensures our content remains perfectly aligned during the transformation, while the overflow property is set to hidden to prevent any content from spilling outside our button boundaries during the transition. We add a smooth 0.3-second transition for all changing properties and set the cursor to pointer to provide a visual cue that this element is interactive.

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

Both our text elements need to occupy the same visual space within the button. We use absolute positioning to place them in the same location, allowing us to swap between them without affecting the button's layout. We apply a transition to ensure smooth fading between states when the visibility changes.

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

The magic happens when users hover over our button. The width expands from 50px to 100px while maintaining the same height, transforming from a circle to a rounded rectangle—a shape more suitable for containing text. This expansion animation takes 0.3 seconds, creating a smooth, satisfying interaction that draws the user's attention to the emerging text.

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

As the button expands on hover, we want the plus symbol to gracefully disappear. We accomplish this by animating its opacity from 1 (fully visible) to 0 (completely transparent) over 0.3 seconds. This creates a fade-out effect that feels natural and prevents an abrupt visual change that might be jarring to users.

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

By default, we keep the "Add Friend" text completely invisible by setting its opacity to 0. This ensures that only the plus symbol is visible in the button's initial state.

        .text {
            opacity: 0;
        }

When the user hovers over the button, we animate the text's opacity from 0 to 1 over 0.3 seconds, creating a fade-in effect that perfectly complements the plus symbol's fade-out. This coordinated transition creates the impression that the plus symbol is being replaced by the text, providing clear feedback about the button's purpose.

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

This expandable button design provides an elegant solution for interfaces where space is at a premium, such as mobile applications or densely packed dashboards. The initial compact circular form conserves space, while the expansion on hover reveals the button's full purpose in a way that feels engaging and intuitive to users. The pure CSS implementation ensures compatibility across browsers without requiring JavaScript, making it both performant and accessible.

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: 0.3s;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
}

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

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

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

.text {
  opacity: 0;
}

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

</style>

Creating an Intuitive Expandable Social Connection Button

HTML

CSS

Whole code

Comments

More buttons

Similar

See also