Styling Buttons with CSS

Buttons behave the same way as any other HTML element in terms of styling. You can use the <a> tag or the <button> tag to style your buttons. I recommend using the <a> tag for lots of reasons.

Links must have an href attribute that species the path of the destination.

Code Snippet - HTML

<a href="path-to-linked-file.html" class="primary-button">Button Text Goes Here</a>

Code Snippet - CSS

/* STYLESHEET*/
a.primary-button {
color:white /* specify font color of button here */;
background-color:#2980b9; /* specify button color here */
border:none;
padding: 12px 32px 12px 32px; /* specify padding to alter the size of the button*/
border-radius: 30px; /* this makes the button rounded. If you want a rectangle, set this to 0 */

}

Result

Button Text Goes Here

Chris Lam - Freelance Web Design and web development, denton, dallas, ft. worth, dfw