How to Create CSS Button Links
See CSS: Tips and Tricks for similar articles.You can use CSS pseudo-classes to create CSS buttons. Before CSS, you needed images to create links that looked like buttons.
- First, set the appearance of the button in a style definition for the
a
tag. The following code creates a block around the text that is a light-green color (Saltpan) with specified fonts and font size, as well as margins and borders.a { display: block; background-color: #eaf1dd; color: #060; text-decoration: none; font-family: Verdana, Geneva, sans-serif; font-size: 1.5em; padding: 6px 4px; margin: 4px; border-right: 2px solid #999999; border-bottom: 2px solid #999999; border-top-width: 0px; border-left-width: 0px; }
- Next, add the pseudo-classes for what the text will look like when it's hovered over and active.
a:hover { color: #030; border: 1px solid #9999ff; } a:active { color: #aca; border-left: 2px solid #030; border-top: 2px solid #030; border-right-width: 0px; border-bottom-width: 0px; }
- Then add the links.
<div> <a href="http://www.washingtonpost.com">WashingtonPost.com</a> <a href="http://www.webucator.com">Webucator</a> <a href="http://www.google.com">Google</a> </div>
- The full code looks like this:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>CSS Link Buttons</title> <style type="text/css"> div { width: 300px; } a { display: block; background-color: #eaf1dd; color: #060; text-decoration: none; font-family: Verdana, Geneva, sans-serif; font-size: 1.5em; padding: 6px 4px; margin: 4px; border-right: 2px solid #999999; border-bottom: 2px solid #999999; border-top-width: 0px; border-left-width: 0px; } a:hover { color: #030; border: 1px solid #9999ff; } a:active { color: #aca; border-left: 2px solid #030; border-top: 2px solid #030; border-right-width: 0px; border-bottom-width: 0px; } </style> </head> <body> <h1>Button Links</h1> <div> <a href="http://www.washingtonpost.com">WashingtonPost.com</a> <a href="http://www.webucator.com">Webucator</a> <a href="http://www.google.com">Google</a> </div> </body> </html>
And now you have what looks like buttons for your links.
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links (this article)
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3