DEV Community

Cover image for CSS Button Styling Guide

CSS Button Styling Guide

Stephanie Eckles on May 07, 2020

This is the ninth post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend develo...
Collapse
 
alohci profile image
Nicholas Stimpson

"Similarly, since this button is not for a form submit, it needs the explicit role of button to prevent triggering a get request and page reload."

I think you mean for that purpose, it needs type="button", not role="button"

Collapse
 
5t3ph profile image
Stephanie Eckles

You are correct! I was working on this too late and got my wires crossed :) Updated, thanks!

Collapse
 
joeattardi profile image
Joe Attardi • Edited

Great article, Stephanie!

I had a question for you. I am currently working on a book about CSS and it's tentatively entitled "Modern CSS". I was not aware of your site moderncss.dev before I chose that name. If you have an issue with that, please let me know and I will gladly change the name!

Collapse
 
5t3ph profile image
Stephanie Eckles

You're very gracious to ask! I'll message you

Collapse
 
dzintars profile image
Dzintars Klavins • Edited

Great article. Learned something new. But still from my perspective there is one missing piece to form the full picture. The icon buttons. Round and rounded corner icon buttons with svg icon. There are some gotchas with svg strokes and fills (line icons or fill icons). Etc. :)
Tnx for sharing.
EDIT: I just now realized that there is second article. :)

Collapse
 
5t3ph profile image
Stephanie Eckles

Hi Dzintars - the article that I wrote after this one covers icon buttons πŸ˜‰
dev.to/5t3ph/icon-button-css-styli...

Collapse
 
5t3ph profile image
Stephanie Eckles

Ha, and I think there was a delay in me seeing your edit! Well either way, here's a link for folks who stop by the comments 😊

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Great explanation!

Collapse
 
5t3ph profile image
Stephanie Eckles

Thanks!