Create Buttons for Your Website without Images

I’ve been trying to learn CSS because I truly believe that every modern marketer should be proficient in HTML and CSS to do their job well. It’s a *pita* to have to ask a developer (in this case my husband) every time I want to make a change to my website. While I’ve gotten along pretty well with my HTML skills, I’ve yet to fully master CSS (I can hack it a little, but I don’t know the core as well as I should). 

I needed to make a button for my website and I didn’t want to call our graphics guy. My husband showed me how to do it in CSS and…voila - just 15 lines of code and it works without any images needed.

Here’s the code:

And here’s what it looks like:


It only works with a plain color as the background, so if you want a gradient you’ll have to use an image. It’s easy to customize, but I’ve also left some elements out so it will pick up the style of my website. For advanced customization you might want to define the font-family, hover effects, etc.

  • a.erinbutton - name the css class anything you like
  • background-color - set the hexadecimal code, in this case pink
  • border - remove the line altogether or set a solid border
  • border-radius - this is for creating the rounded corner effect
  • padding - give the button a little room to breather around the text
  • color - color of the font, in this case white
  • font-size - how big do you want the text
  • text-decoration - turns off the automatic underlining of the text since it’s a hyperlink
  • div style - used to change the alignment of the button (i.e. if you wanted it centered on the page use text-align:center
  • class - reference the css class outlined above, in this case I’m creating the CSS within the page instead of a separate style sheet in case you don’t have access to the CSS
  • href - where should the button send you when clicked
  • Google Erin Colbert - text for the button to display, “sign up” or “click this” work too

I pledge allegiance to the flag of the united state of Apple, and to the white space for which it stands, one nation under Jobs, indivisible, with clean lines and clear messaging for all.