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:
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!