Links are used to navigate from one webpage to other with a single click. We can use CSS properties to style links in various ways.
CSS Links Example
We can create a link in webpage using <a> tag. With CSS we can style this to built text link, button link and image link as shown below.
Table of Contents
- States of Link
- Default Styles of Links
- CSS Text Link
- Styling States of Link
- CSS Button Links
- CSS Image Links
States of Link
A link in a webpage exist in various states, and these states of link can be styled using pseudo-classes in CSS. Following are common states of link.
- Link: Represents unvisited links. This state of links can be styled with :link pseudo class. (This is default state for anchor tag).
- Visited: Represents the links that are already visited (present in browser’s history). This state of links can be styled with :visited pseudo class.
- Hover: Represents the state when user hover’s the mouse pointer over link. This state of links can be styled with :hover pseudo class.
- Active: Represents the state when user clicks the link. This state of links can be styled with :active pseudo class.
Default Styles of Links
Following are default styles applied to a link in webpage. You can modify this style using CSS.
- All the links will be underlined. You can remove this by setting text-decoration property to ‘none’.
- All the unvisited links will be in blue color and visited links will be purple. You can use color property to modify this
- The mouse pointer changes to a little hand icon when you hover over a link. You can use cursor property to modify this.
- Hovered links will be underlined and active links are styled in red.
CSS Text Link
A text content when clicked will navigate to a different webpage or a section of same page is called text link. Following example show how to make a text link.
Example
<html><head><style>body{ padding: 10px; } a { color: blue; text-decoration: none; } a:hover { text-decoration: underline; transform: scale(1.1); } </style></head><body><a href="/index.htm"> Click Me </a></body></html></pre>Styling States of Link
As mentioned above in this example we have used pseudo-classes to style different states of a link.
Example
<html><head><style>body { padding: 10px; font-size: 1.2rem; font-family: sans-serif; }a { display: inline-block; transition: transform 0.2s ease; }a:link { color: green; text-decoration: none; }a:visited { color: purple; }a:hover { text-decoration: underline; transform: scale(1.1) }a:active { color: black; } </style></head><body><p> Select course </p><ul><li><a href="/html/index.htm" target="_blank"> HTML </a></li><li><a href="/css/index.htm" target="_blank"> CSS </a></li><li><a href="/python/index.htm" target="_blank"> Python </a></li></ul></body></html></pre>CSS Button Links
In CSS we can styles links in such a way that it looks like a clickable button. Following example shows this.
Example
<html><head><style>body { display: flex; justify-content: space-around; padding: 10px; height: 100px; }.button { display: inline-block; color: white; background-color: blue; height: 20%; padding: 10px 20px; text-align: center; text-decoration: none; border-radius: 5px; transition: all 0.3s ease; }.button:hover { background-color: darkblue; transform: scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } </style></head><body><a class="button" href="/css/index.htm" target="_blank" > CSS </a><a class="button" href="/html/index.htm" target="_blank" > HTML </a></body></html></pre>CSS Image Links
We can also attach links on images displayed in webpage. Following example shows this.
Example
<html><head><style>body { display: flex; justify-content: space-around; padding: 10px; height: 100px; }a img { transition: all 0.3s ease; border-radius: 5px; } a:hover img { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } </style></head><body><a href="/css/index.htm" target="_blank" ><img src="/css/images/css.png" alt="css-image-link" height="60px" ></a></body></html></pre>
Leave a Reply