Back

Elegant Email Contact Button

Learn how to create a stylish email contact button that elegantly transforms from an "@" symbol to a complete email address on hover - using CSS only.

HTML

For the HTML structure, we need three elements inside a div container: a button with an SVG icon and two span elements. One span has the class "email-prefix" containing the text "info", and the other has the class "email-domain" containing "designyff.com".

        <div class="button">
          <span class="email-prefix">Info</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
            <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/>
          </svg>
          <span class="email-domain">designyff.com</span>
        </div>

CSS

First, let's establish the basic styling for our button container. We'll set the background color to green and the text color to white, add a subtle shadow, and define the dimensions. The button will have a width of 50px and height of 40px, with padding and rounded borders (border-radius: 100px). Using flexbox, we'll center all elements within the container. Finally, we'll add a transition property to ensure smooth animation effects.

        .button {
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 5px;
            background-color: rgb(76, 175, 80);
            width: 50px;
            height: 40px;
            color: #fff;
            box-shadow: 0 0 5px #999;
            padding: 10px;
            border-radius: 100px;
            transition: 0.5s;
        }

When users hover over the button, we'll expand its width from 50px to 180px with a smooth transition effect.

        .button:hover {
            width: 180px;
            transition: 0.5s;
        }

The email prefix and domain elements start with zero width and hidden overflow, which makes them invisible initially.

        .email-prefix, .email-domain {
            width: 0px;
            overflow: hidden;
            transition: 0.5s;
        }

On hover, the email prefix ("info") will expand to 28px wide with a smooth transition, making it visible to users.

        .button:hover .email-prefix {
            width: 28px;
            transition: 0.5s;
        }

Similarly, the email domain ("designyff.com") will expand to 100px wide on hover, completing the full email address display with a smooth animation.

        .button:hover .email-domain {
            width: 100px;
            transition: 0.5s;
        }

And there you have it - a stylish, interactive email contact button!

Whole code

<div class="button">
  <span class="email-prefix">info</span>
  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
  </svg>
  <span class="email-domain">designyff.com</span>
</div>

<style>
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  background-color: rgb(76, 175, 80);
  width: 50px;
  height: 40px;
  color: #fff;
  box-shadow: 0 0 5px #999;
  padding: 10px;
  border-radius: 100px;
  transition: 0.5s;
}
.button:hover {
  width: 180px;
  transition: 0.5s;
}
.email-prefix, .email-domain {
  width: 0px;
  overflow: hidden;
  transition: 0.5s;
}
.button:hover .email-prefix {
  width: 28px;
  transition: 0.5s;
}
.button:hover .email-domain {
  width: 100px;
  transition: 0.5s;
}

</style>

Elegant Email Contact Button

HTML

CSS

Whole code

Comments

More buttons

Similar

See also