Blog Post: Creating CSS Buttons

Red Deer & Blackfalds Web Design Writes:

There is really no shortage to the limits of creating buttons with CSS. It sounds pretty minimal, but ultimately how a person moves through your website is based on how attractive your navigation is and the series of buttons located on your individual pages. It takes a certain amount of creativity, but by properly combining Transitions, Colours and Size you can create a pretty powerful element to your website.

Below is an example of a Button-Style as well as the proper HTML and CSS to accompany it. It may not be exactly the button you’re looking for, but by playing with the CSS you can create exactly what you’re after:

Contact Me

HTML

˂a href=”/contact” class=”css-button-article”˃Contact Me˂/a˃

CSS

a.css-button-article {font-size: 20px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 6px 20px; line-height: 2.7em; background: transparent; border: 2px solid; border: 2px solid #AD0D25; color: #AD0D25; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -ms-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease;}

a.css-button-article:hover:after {content: ” >”;}

a.css-button-article:hover {background: rgba(173,13,37,0.55); border: 2px solid rgba(0,0,0,0); color: white; padding: 6px 12px;}

In the beginning this may look complicated; however, by picking through the different styles of CSS in this article you will be able to add or subtract the colour, size and transition elements for your specific site:

  1. a.css-button-article – depicts the baseline style configuration of the button
  2. a.css-button-article:hover:afteradds a character after the text located in the button, upon hover of the cursor
  3. a.css-button-article:hoverdepicts the style configuration changes that occur upon hover of the button with the cursor

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)