DEV Community

Designyff
Designyff

Posted on • Originally published at designyff.com

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

Info hover button

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

.button:hover {
    width: 180px;
    transition: .5s;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And that is it.

You can find full code and video tutorial here.

Thanks for reading. ❤️

Top comments (0)