Turn Links into Buttons with CSS

CSS Tags Decorate Stuff!

Using CSS you can turn dull links into attractive buttons. Let me show you how!

What an average link looks like...

Average link

Average link

What a link could look like...

Button link

Button link

By using CSS I am able to decorate the anchor tag! Before CSS buttons on websites were text in images between the anchor tags.

THIS WAS BAD. Loading images takes a significant amount of time, much more than the average visitor was willing to spend watching the page load. CSS is a way of decorating text based on selectors and classes which describe the style needed.

Thanks to CSS you don't have to compromise looks for speed. Take a look at some more examples of how CSS can decorate links to appear as buttons.

Don't Have the Time to learn CSS?

Although learning CSS would be ideal, there are many programs and websites that host programs to help you create buttons visually. The CSS for the buttons will be printed out to you once you reached a design you like! Try a CSS button creator now!

What a link could look like...

Button link 2

Button link 2 

The Parts of a CSS Button

• a:link - How non-visited links would appear.
• a:visited - How visited links would appear.
• a:hover - How links appear while the mouse hovers over them.
• a:active - How links appear while they are clicking.

Mouse Hover Effects with CSS

Hover over the link below! (Example 1)

Add W7R to your favorites!

The link above is a result of the code in the text area below. The text ":hover" is placed behind the id selector, #post, to indicate that all CSS styles in the following brackets should take place when the mouse is hovering over the element with the matching id, "#post".

 Add W7R to your favorites! 

We all have seen hover effects on links, but how about paragraph or divisions <div> like this text here. This phenomenum is made possible by using the ":hover" syntax following the selector we are using which in this case is "hovering". ":hover" is an example of a pseudo-property. Pseudo properties are attached to selectors to indicate that the selector has the block of CSS when that pseudo property applies. Other pseudo properties can be found here!

We all have seen hover effects on links, but how about paragraph or divisions <div> like this text here. This phenomenum is made possible by using the ":hover" syntax following the selector we are using which in this case is "hovering".

All elements of a webpage can be used like the link and paragraph did with the syntax below.

content

For more information please visit CSS :hover Selector

Introduction to CSS

An Introduction To CSS

It is recommended you understand HTML (DHTML, XHTML) before digging into CSS. CSS stands for Cascading Style Sheets and describes how a web page and its parts should be displayed. External style sheets are CSS files that can be implemented into any web page you desire. For example, a CSS file can describe how much indentation there should be in every paragraph <p> element.

Why web developers need CSS

The reason web developers need CSS is because HTML was never intended to provide visual properties to its components, but to instead inform web browsers of what element they were going to be displaying. Different web browsers display HTML in different ways (same for CSS). CSS separate the bones(HTML code) from the flesh (CSS).

Support for CSS

Have no fear! All web browsers support CSS so everything you learn about CSS will apply to a website viewed on any web browser, such as Firefox, Google Chrome, Internet Explorer, Safari, Opera, SimplePie.

Learning CSS Resources

W7R.blogspot.com currently has only a few lessons/posts on CSS, so I want to leave you with two great sites where you can study CSS.

• Codecademy.com
• w3schools.com

Getting Rid of Blogger's Navigation Bar

Making the Blogger navigation bar at the top of your site is easy! Follow the steps below and your blog will be squeaky clean in no time!

Getting Rid Of Blogger's Navigation Bar in 3 Steps

1. Get on your blogger account and go to "Layout". Select "Customize".

2. In Layout select the option labeled "Advanced". Then select the "Add CSS" tab.

3. Copy the code highlighted below into the text area. Press "Apply To Blog" to save the change.

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}