HyperlinkCode.com

How to create 500 totally unique, human-quality articles in just 45 seconds ..

#CC0033 CSS and HTML for Hyperlinks

HTML and CSS code to style hyperlinks with hex color #CC0033 for color, shadow, glow and underline effects.

#CC0033 Colored Hyperlinks

HTML and Inline CSS

Can be used directly into HTML documents same as standard hyperlink.

<a href="CC0033.php" style="color: #CC0033;">Link colored with #CC0033 hex color</a>

CSS Code

Can be used in external or internal stylesheet along with other CSS properties.

a:link {
color: #CC0033;
}
a:visited {
color: #CC0033;
}
a:hover {
color: #CC0033;
}

Output

Link colored with #CC0033 hex color

Select output background color:  [more]

#CC0033 Shadow Hyperlink

HTML and Inline CSS

Can be used directly into HTML documents same as standard hyperlink.

<a href="CC0033.php" style="text-decoration: none; text-shadow: 3px 3px 2px #CC0033;">This is a link with shadow color #CC0033</a>

CSS Code

Can be used in external or internal stylesheet along with other CSS properties.

a{
text-decoration: none;
}
a:link {
text-shadow: 3px 3px 2px #CC0033;
}
a:visited {
text-shadow: 3px 3px 2px #CC0033;
}
a:hover {
text-shadow: 3px 3px 2px #CC0033;
color: #DD0000;
}

Output

This is a link with shadow color #CC0033

Select output background color:  [more]

#CC0033 Glowing Hyperlink

HTML and Inline CSS

Can be used directly into HTML documents same as standard hyperlink.

<a href="CC0033.php" style="text-decoration: none; text-shadow: 0px 0px 2px #CC0033;">This is a link with glow color #CC0033</a>

CSS Code

Can be used in external or internal stylesheet along with other CSS properties.

a{
text-decoration: none;
}
a:link {
text-shadow: 0 0 2px #CC0033;
}
a:visited {
text-shadow: 0 0 2px #CC0033;
}
a:hover {
text-shadow: 0 0 2px #CC0033;
color: #DD0000;
}

Output

This is a link with glow color #CC0033

Select output background color:  [more]

#CC0033 Hyperlink Underline Color

HTML and Inline CSS

Can be used directly into HTML documents same as standard hyperlink.

<a href="CC0033.php" style="text-decoration: none; border-bottom: 1px solid #CC0033;">This is a link with underline color #CC0033</a>

CSS Code

Can be used in external or internal stylesheet along with other CSS properties.

a{
text-decoration: none;
}
a:link {
border-bottom: 1px solid #CC0033;
}
a:visited {
border-bottom: 1px solid #CC0033;
}
a:hover {
border-bottom: 1px solid #CC0033;
color: #DD0000;
}

Output

This is a link with underline color #CC0033

Select output background color:  [more]

The underline thickness can be made thicker by changing 1px to higher value such as 2px 3px and so on.

See also dashed and dotted underline CSS and additional underline effects with external CSS.

Free web design videos! Learn the easy way to responsive (mobile friendly) web design.

#CC0033 Dashed Underline Hyperlink

HTML and Inline CSS

Can be used directly into HTML documents same as standard hyperlink.

<a href="CC0033.php" style="text-decoration: none; border-bottom: 2px dashed #CC0033;">This is a link with dashed underline color #CC0033</a>

CSS Code

Can be used in external or internal stylesheet along with other CSS properties.

a{
text-decoration: none;
}
a:link {
border-bottom: 2px dashed #CC0033;
}
a:visited {
border-bottom: 2px dashed #CC0033;
}
a:hover {
border-bottom: 2px dashed #CC0033;
color: #DD0000;
}

Output

This is a link with dashed underline color #CC0033

Select output background color:  [more]

The dash size can be changed by changing 2px to 1px, 3px and so on.

See also dotted underline CSS and additional dashed underline effects with external CSS.

#CC0033 Dotted Underline Hyperlink

HTML and Inline CSS

Can be used directly into HTML documents same as standard hyperlink.

<a href="CC0033.php" style="text-decoration: none; border-bottom: 2px dotted #CC0033;">This is a link with dotted underline color #CC0033</a>

CSS Code

Can be used in external or internal stylesheet along with other CSS properties.

a{
text-decoration: none;
}
a:link {
border-bottom: 2px dotted #CC0033;
}
a:visited {
border-bottom: 2px dotted #CC0033;
}
a:hover {
border-bottom: 2px dotted #CC0033;
color: #DD0000;
}

Output

This is a link with dotted underline color #CC0033

Select output background color:  [more]

The dot size can be changed by changing 2px to 1px, 3px and so on.

See also dashed underline CSS and additional dotted underline effects with external CSS.

See also html-color-names.com for matching colour palettes with hex color codes.

Back to color chart.

Related

© Copyright 2007 - 2017 HyperlinkCode.com.
Site Admin: Ed Zivkovic. Privacy | Terms