HyperlinkCode.com

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

#CC6666 CSS and HTML for Hyperlinks

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

#CC6666 Colored Hyperlinks

HTML and Inline CSS

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

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

CSS Code

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

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

Output

Link colored with #CC6666 hex color

Select output background color:  [more]

#CC6666 Shadow Hyperlink

HTML and Inline CSS

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

<a href="CC6666.php" style="text-decoration: none; text-shadow: 3px 3px 2px #CC6666;">This is a link with shadow color #CC6666</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 #CC6666;
}
a:visited {
text-shadow: 3px 3px 2px #CC6666;
}
a:hover {
text-shadow: 3px 3px 2px #CC6666;
color: #DD0000;
}

Output

This is a link with shadow color #CC6666

Select output background color:  [more]

#CC6666 Glowing Hyperlink

HTML and Inline CSS

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

<a href="CC6666.php" style="text-decoration: none; text-shadow: 0px 0px 2px #CC6666;">This is a link with glow color #CC6666</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 #CC6666;
}
a:visited {
text-shadow: 0 0 2px #CC6666;
}
a:hover {
text-shadow: 0 0 2px #CC6666;
color: #DD0000;
}

Output

This is a link with glow color #CC6666

Select output background color:  [more]

#CC6666 Hyperlink Underline Color

HTML and Inline CSS

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

<a href="CC6666.php" style="text-decoration: none; border-bottom: 1px solid #CC6666;">This is a link with underline color #CC6666</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 #CC6666;
}
a:visited {
border-bottom: 1px solid #CC6666;
}
a:hover {
border-bottom: 1px solid #CC6666;
color: #DD0000;
}

Output

This is a link with underline color #CC6666

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.

#CC6666 Dashed Underline Hyperlink

HTML and Inline CSS

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

<a href="CC6666.php" style="text-decoration: none; border-bottom: 2px dashed #CC6666;">This is a link with dashed underline color #CC6666</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 #CC6666;
}
a:visited {
border-bottom: 2px dashed #CC6666;
}
a:hover {
border-bottom: 2px dashed #CC6666;
color: #DD0000;
}

Output

This is a link with dashed underline color #CC6666

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.

#CC6666 Dotted Underline Hyperlink

HTML and Inline CSS

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

<a href="CC6666.php" style="text-decoration: none; border-bottom: 2px dotted #CC6666;">This is a link with dotted underline color #CC6666</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 #CC6666;
}
a:visited {
border-bottom: 2px dotted #CC6666;
}
a:hover {
border-bottom: 2px dotted #CC6666;
color: #DD0000;
}

Output

This is a link with dotted underline color #CC6666

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