Amazing Mail Button SVG Animation | HTML & CSS |

Hello friends, welcome to our blogspot TECH WITH ANURAG  and  in this blog we are going to learn how to create Amazing Mail Button SVG Animation using HTML & CSS Only in this blog post.

Email is short for 'Electronic mail' and was planned as a program used to trade messages that are put away inside a computer. However, in most cases, a user can also send non-text records, for example, pictures, recordings, and sound documents through the mail as connections. Emails work in a similar usefulness as that of conventional paper mail. An email account works a similar route as a letter drop in which the message is put away until it is read by the user.

In this program(Amazing Mail Button SVG Animation using HTML & CSS) first, on the webpage there is card design and in the card envelope the logo in the circle and a send button when you click on the send button with SVG  animation the envelope change to plane send animation.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(Amazing Mail Button SVG Animation using HTML & CSS).

Video Tutorial of Amazing Mail Button SVG Animation

I hope you like this program and video tutorial😊

If you like this program(Amazing Mail Button SVG Animation) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program. 

To get the source code you simply need to look down.

You might like this:

• Animated Share Button Using Only HTML & CSS
• Image Overlay Hover Effects Using HTML and CSS
• Animated Login form| HTML & CSS |
• Mobile Menu Design Using HTML & CSS (no Javascript)

Amazing Mail Button SVG Animation HTML & CSS [SOURCE CODE]

Before the sharing the codes of this program(Animated Share Button).Let's talk about some important tags and codes of this program. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file.

In HTML File first i created a <div> with the class name frame and inside the div add <input> with the id 'send' and input type 'checkbox' and then add a <label> send mail for id send with the class name btn-reset and also add a another <label> RESET same as first <label>. Then create two another <div> with the class name 'ring' and 'circle'.

Then use <SVG> one for mail and another for plane. For the designing mail and plane in svg i used <polyline> element. 

In CSS file first (if you not using boostrap) reset the all default padding and margin to 0.

HTML FILE:

<div class="frame"> <input type="checkbox" id="send"/> <label for="send" class="btn-send">SEND MAIL</label> <label for="send" class="btn-reset">RESET</label> <div class="ring"></div> <div class="circle"></div> <svg class="mail"> <polyline points="119,1 119,69 1,69 1,1"></polyline> <polyline points="119,1 60,45 1,1 119,1"></polyline> </svg> <svg class="plane"> <polyline points="119,1 1,59 106,80 119,1"></polyline> <polyline points="119,1 40,67 43,105 69,73"></polyline> </svg> </div> 

CSS FILE:

.frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1); overflow: hidden; background: #2C3E50; color: #333; font-family: 'Open Sans', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ring, .circle { width: 200px; height: 200px; border-radius: 50%; position: absolute; left: 100px; top: 65px; } .ring { box-sizing: border-box; border: 4px solid #354A5F; } .circle { background: #354A5F; } .btn-send, .btn-reset { display: block; font-weight: bold; font-size: 15px; color: rgba(53, 74, 95, 1); text-align: center; line-height: 40px; width: 200px; height: 40px; background: #ECF0F1; border-radius: 20px; position: absolute; top: 290px; left: 100px; } .btn-send:hover, .btn-reset:hover { cursor: pointer; background: #1abc9c; color: #ECF0F1; } .btn-send { z-index: 1; } .btn-reset { z-index: 0; opacity: 0; } input[type="checkbox"] { display: none; } @keyframes btn-animation { 0% {} 13% {background: #1abc9c;width: 200px;left: 100px;} 15% {color: rgba(53, 74, 95, 0)} 18% {width: 40px;left: 180px;} 26% {transform: scale(1,1)} 28% {transform: scale(1.2,1.2)} 50% {transform: scale(0,0);} 100% {transform: scale(0,0);background: #1abc9c;width: 40px;left:180px;color: rgba(53, 74, 95, 0);} } #send:checked ~ .btn-send { animation: btn-animation 4s 2s ease; animation-fill-mode: both; } #send:checked ~ .btn-reset { transition: opacity 1s 4s ease; opacity: 1; } @keyframes circle-animation { 0% {transform: scale(1,1)} 20% {transform: scale(1.1,1.1)} 100% {transform: scale(0,0)} } #send:checked ~ .ring { animation: circle-animation 1s .35s ease-out; animation-fill-mode: both; } #send:checked ~ .circle { animation: circle-animation 1s ease-in; animation-fill-mode: both; } svg { stroke: #ECF0F1; stroke-width: 2px; fill: none; position: absolute; left: 140px; top: 130px; } .mail { width: 120px; height: 70px; stroke-dasharray: 265.2; stroke-dashoffset: 0; } #send:checked ~ .mail { animation: mail-animation 1s linear forwards; } .plane { width: 120px; height: 106px; stroke-dasharray: 319; stroke-dashoffset: 319; } #send:checked ~ .plane { animation: plane-animation 1s linear 1s forwards; } @keyframes mail-animation { to { stroke-dashoffset: 265.2; } } @keyframes plane-animation { 50% {transform: scale(1,1);} 66% { stroke-dashoffset: 0; opacity: 1; left: 140px; top: 130px; transform: scale(1.05,1.05); } 100% { stroke-dashoffset: 0; opacity: 0; left: 280px; top: 40px; transform: scale(0.8,0.8); } }