Back

Beautiful contact by email button

Tutorial on how to create a beautiful email contact button that transforms from ",@" sign to whole email address on hover - CSS only.

HTML

For HTML, we need a div element with class "button" and two text elements inside with "@" svg between them.


        <div class="button">
          <span>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>designyff.com</span>
        </div>

CSS

For CSS, first we'll style a "button" class. First, we'll align items using flexbox, and set cursor to pointer and width to 50px. Now we'll set position to relative, background color to light blue and text color to white. We'll add a little box shadow and white border of 1 pixel width with 100px radius. Lastly, we'll add some paddings and transition.


        .button {
            display: flex;
            justify-content: start;
            align-items: center;
            cursor: pointer;
            width: 50px;
            position: relative;
            background-color: rgb(69, 165, 249);
            color: #fff;
            box-shadow: 0 0 40px #777;
            border: 1px solid #fff;
            padding: 10px;
            border-radius: 100px;
            transition: .5s;
        }

On hover, we'll increase the width from 50 to 100px and add transition.


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

Text elements inside a button will have the width of 0 and overflow hidden with a little transition.


        span {
            width: 0px;
            overflow: hidden;
            transition: .5s;
        }

On hover, first text element (with "info" text) will become 28 pixels wide and we'll add a little transition so that this width change is smooth.


        .button:hover span:first-child {
            width: 28px;
            transition: .5s;
        }

The second text element (with "designyff.com" text) will become 100 px wide, and with transition, this change will look nice and smooth.


        .button:hover span:last-child {
            width: 100px;
            transition: .5s;
        }

And that is it.

Video tutorial

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

Whole code

<div class="button">
  <span>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>designyff.com</span>
</div>

<style>
.button {
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  width: 50px;
  position: relative;
  background-color: rgb(69, 165, 249);
  color: #fff;
  box-shadow: 0 0 40px #777;
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 100px;
  transition: .5s;
}
.button:hover {
  width: 180px;
  transition: .5s;
}
span {
  width: 0px;
  overflow: hidden;
  transition: .5s;
}
.button:hover span:first-child {
  width: 28px;
  transition: .5s;
}
.button:hover span:last-child {
  width: 100px;
  transition: .5s;
}

</style>

Thank you for reading this article.

Beautiful contact by email button

HTML

CSS

Video tutorial

Whole code

More buttons

Similar

See also