https://github.com/withaarzoo/animated-mail-button

Animated Mail Button Using HTML and CSS.
https://github.com/withaarzoo/animated-mail-button

Last synced: about 10 hours ago
JSON representation

Animated Mail Button Using HTML and CSS.

• Host: GitHub
• URL: https://github.com/withaarzoo/animated-mail-button
• Owner: withaarzoo
• Created: 2023-01-10T14:25:04.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-11T06:51:52.000Z (almost 2 years ago)
• Last Synced: 2023-12-30T18:51:51.101Z (11 months ago)
• Language: CSS
• Size: 5.86 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Mail Button

A simple, animated mail button built using HTML and CSS. The button features an envelope icon that animates and transforms into a "check" icon when clicked, indicating that the mail has been sent successfully.

## HTML

This code creates an animated mail button using HTML and CSS. The HTML structure consists of a container element with a class of "letter-image", which contains several child elements that make up the different parts of the mail button.

```HTML

  


    


      


      


        


        


        


        


          


        

      

      


      


      


    

    


  

```


## CSS

The CSS code styles these elements to create the animation. The animated-mail class is used to style the overall button, and several other classes are used to style the individual parts of the button (e.g. `body`, `top-fold`, `back-fold`, etc.). The `-webkit-transition`, `-moz-transition`, and `transition` properties are used to create the animation effect when the button is hovered over, by transitioning the transform property of several elements.

You could add an on hover effect, that makes the button appear like it's being pressed and then released.

```CSS

.letter-image:hover .animated-mail {

  -webkit-transform: rotateX(90deg);

  -moz-transform: rotateX(90deg);

  transform: rotateX(90deg);

  -webkit-transition-duration: 0.5s;

  -moz-transition-duration: 0.5s;

  transition-duration: 0.5s;

}

```

It's worth noting that this button's design is meant to look like a folded piece of mail and this animation is for demonstration purposes only, As the design and functionality of the button, need to be adjusted to fit the desired context.

It could also be helpful to add some JavaScript functionality, to create a link when the button is clicked that would take you to your email client, or a mailto link.

## Usage

To use this button, simply copy and paste the HTML and CSS into your project.

Please let me know if you need any further modifications.

## Preview