How to send HTML emails using Gmail without any extensions 🤔

In this latest post, we'll learn how to create HTML emails in Gmail that contain tables, buttons, custom fonts, inline CSS styles and many many things without using extensions.

**What will we learn **

  • Inline CSS
  • Adding buttons
  • custom fonts
  • Emojis
  • Media Queries
  • HTML signatures

Lez GO 🤘

For Adding Buttons

  • We'll add this snippet in our mail
<h1>HTML Button in Gmail</h1>
<p>
  <a style="background-color: #1a73e8; padding: 10px 20px;
            color: white; text-decoration:none;font-size:14px;
            font-family:Roboto,sans-serif;border-radius:5px" href="https://blog.rahulism.co/">Visit My Hashnode Powered Blog
  </a>
</p>

<p>
  
In this latest post, we'll learn how to create HTML emails in Gmail that contain tables, buttons, custom fonts, inline CSS styles and many many things without using extensions. (EXAMPLE)<br />
  </p>

for CSS

body {
  background: #f0f0f0;
  margin: 40px auto;
  width: 600px;
}

h2,
p{
  margin-bottom: 40px;
}

OUTPUT WILL BE AS FOLLOWS
1.png See this fidle - Example

  • 2.png Now head towards your Gmail and compose a new email😎.
  • 3.png Click on inspect
  • 4.png You'll be redirected to a new chrome window and then some codes will be highlighted there by default.
  • 5.png lick on edit as HTML.
  • 6.png Now paste your button code
  • 7.png it the enter button and see you button will be on you compose email

Above tutorial for adding buttons in your email.

WE'VE USED CHROME DEV TOOLS IN A COOL WAY.

I just forgot to add the extra text(SORRY), I added only the button but that is the same procedure for that too. You can use the same tricks for adding anything extra. But only using inline CSS.


THANKS FOR READING 😋 3.png


Originally posted on - [RAHULISM ](https://blog-rahulism.netlify.app/) (PERSONAL BLOG)

© 2020 RAHULISM • Developed with ❤️ and 🍕 by RAHUL