Blog Post: Button Design

Red Deer & Blackfalds Web Design Writes:

For Small Business owners and Website Developers, one of the most important elements on a Website is assigning a Call to Action in order to generate new business. In order to accomplish this as best as possible it is important to capture your audience by drawing their eye(s) to a certain part of the page. This is generally done with a link to a contact section that contrasts the rest of the page.

For instance, if you saw this somewhere on a page you wouldn’t be inclined to click:

Contact Us

But! If you saw something like this, you naturally would be more inclined:

Contact Us

Now! This isn’t necessarily the case for all individuals, but in terms of User Experience on a website it is important to draw the eye to certain places that require more attention. When developing a button here are the most important CSS rules to account for:

  • border-radius: – will give the corners of your button a slight curvature.
  • background: – sets the background colour and/or image of the button.
  • color: – controls the colour of the text in the button.
  • font-size: – sets the size of the font inside the button.
  • padding: – will add padding both on top of the lettering, as well as to the sides.
  • font-weight: – will either thin-out or bold the lettering of the button.
  • border: – set the line weight, colour and type of border around a button.

The CSS of a button can be taken further, but by using the rules above you will be able to generate a beautiful button in no time at all!

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)