Beautiful contact by email button - A step-by-step guide

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.

You can find full code and video tutorial here.

Thanks for reading. ❤️