in this tutorial you will learn how to write CSS for hyperlink tag, you can use css style for anchor tag that will look like button.
a { font-size: 15px; text-decoration: none; color: #808080; }
We often see different type of hyperlink on web pages, colorful, big, small hyperlink color matching with page design; we can different CSS property of hyperlink or anchor tag.
Hyperlink or Anchor tag is one of the most important elements in HTML document; very often we use this element in different form like in navigation, image, button, in content.
As a web designer we need to make sure the hyperlink looks attractive and maintain same standard throughout the website.
Common mistake we do, we keep writing different style for hyperlink in each page.
Here we learn how to design hyperlink CSS for different type of html element in website, so it remain consistent
There are different ways to write CSS class for Hyperlink or Anchor Tag
Customise the hyperlink look and feel, change font color, background, font size for every mouse event like hover , mouse out etc.
a { font-size: 15px; text-decoration: none; color: #808080; } a:hover { font-size: 15px; color: #f00; text-decoration: underline; } a:active { font-size: 15px; text-decoration: none; color: #000; }
Now you learn how to write CSS for Hyperlink with in some HTML element, for example
we write content with <p>, <div>, <span>, <table>
tags ,
so you can define how your hyperlink would look like in content within a <div>
tag
Here is Hyperlink CSS example for <div>
tag.
div a { font-size: 15px; text-decoration: none; color: #808080; } div a:hover { font-size: 15px; color: #f00; text-decoration: underline; } div a:active { font-size: 15px; text-decoration: none; color: #000; }
.btn1 { padding:10px; border:solid 1px #0094ff; font-size:large; border-radius:5px; background-color:#00ff90; } <a href="#" class="btn1">Click</a>
.btn2 { text-decoration: none; } <a href="#" class="btn1">Click</a>
div a:hover { font-size: 15px; color: #f00; text-decoration: underline; }
The above code says, whenever you write any hyperlink a tag inside any div, and when user take mouse pointer over that hyper link then the link will look as per above specified CSS properties.
Now instead of applying hyperlink hover effect in all the link inside div tag, we could have written a class with same property, means wherever that css class is applied , there the link color will change.