Web Design Tidbits #4: Gmail send button

PyLadies Vienna workshop

In a series of blog posts, we’ll discuss web design’s best practices when it comes to usability, responsiveness and accessibility. We care about great design and we’d love to show you that a little CSS love goes a long way. In this post I’ll look at the Gmail send button, to replicate its clear blue design for your actions.

I went ahead and replicated the necessary HTML and CSS and saved it on Codepen for you to play around with:

Gmail send button on Codepen

Recreating the Gmail send button

Different from Kippt, who use an a link to style, Gmail styles a whole div. I’m guessing they used a div as Google has many similar looking buttons, just with different colors and different widths. Rather than creating a lot of different classes for their links, they opted for div‘s, to keep styles more clear.

For the next Tidbits post, I’ll take a look at the LinkedIn ‘pop-ups’. Might you have any requests for upcoming editions, let us know in the comments!