THE BEST UI KITS MONEY CAN BUY

Click Here!

Pure CSS animated mail contact icon

Pure CSS animated mail contact icon

2019-09-15 |

Here is a simple mail icon using css and html to create a dynamic and easy to use contact icon.

Each corner of the paper is created using border widths to create a triangular effect and the animation is a simple css hover bringing the paper from behind the other elements revealing the contact email address.

The HTML

<div class="wrapper">
<div class="top"></div>

<div class="paper">
<a href="mailto:">hello@myemail.com</a>
</div>

<div class="corner-1"></div>

<div class="corner-2"></div>

<div class="bottom"></div>
</div>

The CSS

The basic a tag styling for the email link.

a { text-decoration:none; color:inherit }

A wrapper using border radius to create a circular effect.

.wrapper { width:300px; height:300px; border-radius:150px; background:#5bc1c1; margin:auto; position:relative; animation:paper-anim 2s }

This is where the hover effect will take place for the paper to come out of the envelope. It uses a simple top property and a slight minus rotation.

.wrapper:hover .paper { top:50px; -ms-transform:rotate(-9deg); /* IE 9 */ -webkit-transform:rotate(-9deg); /* Chrome, Safari, Opera */ transform:rotate(-9deg) }

The top class is the opened part of the envelope using border widths to create a triangle.

.top { position:absolute; width:0; height:0; border-style:solid; border-width:0 100px 60px; border-color:transparent transparent #c4c4c4; top:60px; left:50px }

Using a pseudo element we create a :before, this will be the main rectangle that sits below the top of the envelope.

.top:before { content:""; position:absolute; width:200px; height:100px; background:#969696; position:absolute; top:60px; left:-100px }

The paper is a simple rectangle, don’t forget to add the animation presents you with to use for the hover effect.

.paper { width:170px; height:70px; padding-top:30px; text-align:center; background:#fff; position:absolute; top:110px; left:65px; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out }

Below you can see the two left and right bottom corners, again these were created using border widths and transparencies to create this triangle shape, give them a lighter or darker grey colour than other parts of the envelope to create the illusion of depth and shadow.

.corner-1 { position:absolute; width:0; height:0; border-style:solid; border-width:100px 0 0 150px; border-color:transparent transparent transparent #d8d8d8; top:120px; left:50px }

.corner-2 { position:absolute; width:0; height:0; border-style:solid; border-width:0 0 100px 150px; border-color:transparent transparent #d8d8d8; top:120px; right:50px }

The final step is to create one last triangle that will sit on top of the corners for the centre fold, again using a different shade of grey for the shadow effect.

.bottom { position:absolute; width:0; height:0; border-style:solid; border-width:0 100px 60px; border-color:transparent transparent #c4c4c4; top:160px; left:50px }

View the codepen