Pure HTML & CSS Buttons

Posted on 19 Mar 2014 by Sam Hewitt

I love doing things as simple as I can and that includes in web development, like buttons:

Sam on Twitter

In my mind a button is a glorified link and a nice simple button is a style class or two away. Here’s a little JSFiddle for an example:

Pretty simple, but you can make them more complicated by embedding an SVG icon, but I talk about that in another post/

All the border:none; and outline:none; in the .button classes are there to override any user-agent stylesheets that like to theme buttons and make yours less pretty. :)


I'm not a fan of comments sections, so feel free to contact me directly.

Recent Posts

Taking the "User" out of Design20 Feb 2019
Basic Linux Virtualization with KVM16 Feb 2019
Moving Beyond Themes05 Aug 2018
Adorbs for Telegram!27 Jul 2018
Joining the GNOME Foundation25 Jul 2018