In my previous CSS3 article, we created blurred text using a shadow and a transparent text color. Today, we’ll use a similar technique to create animated glowing links.
Text-shadow is a versatile CSS3 property which is supported in all browsers without vendor prefixes. Except one. Sorry IE9 users — you’ll need to wait a few more months for IE10. It’s not just useful for shadows, though. On a darker background, a white “shadow” appears to make the text glow:
This can be applied when the user hovers/focuses over a link. With a little CSS3 transition magic, we can create an animated glowing effect. Let’s write some code. Starting with our HTML, we’ll apply a “glow” class to a link:
<a href="#" class="glow">Glowing Link</a>
a.glow, a.glow:hover, a.glow:focus
{
text-decoration: none;
color: #aaf;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
-o-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}
a.glow:hover, a.glow:focus
{
color: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
if (document.createElement("detect").style.textShadow === "") {
document.getElementsByTagName("html")[0].className += " textshadow";
}
Frequently Asked Questions (FAQs) about CSS3 Glowing Link Effect
How can I make the glow effect more prominent in CSS3?
To make the glow effect more prominent, you can adjust the ‘box-shadow’ property in your CSS code. The box-shadow property allows you to apply a shadow effect to the border of an element. You can increase the blur radius or spread radius to make the glow effect more prominent. For example, you can use the following code:a {
box-shadow: 0 0 10px #09f;}
In this code, ‘0 0′ represents the horizontal and vertical offsets of the shadow, ’10px’ is the blur radius, and ‘#09f’ is the color of the shadow. You can adjust these values to achieve the desired glow effect.
Can I apply the glow effect to other elements besides links?
Yes, the glow effect can be applied to any HTML element, not just links. You can apply it to divs, images, buttons, etc. You just need to replace the ‘a’ in the CSS code with the selector of the element you want to apply the glow effect to. For example, to apply the glow effect to a button, you can use the following code:button {
box-shadow: 0 0 10px #09f;}
In this code, ‘button’ is the selector of the button element.
How can I change the color of the glow effect?
The color of the glow effect can be changed by adjusting the color value in the ‘box-shadow’ property. The color value can be a hexadecimal color, a RGB color, or a named color. For example, to change the glow color to red, you can use the following code:a {
box-shadow: 0 0 10px red;}
In this code, ‘red’ is the color of the glow effect.
Can I apply multiple glow effects to the same element?
Yes, you can apply multiple glow effects to the same element by specifying multiple box-shadow properties separated by commas. Each box-shadow property will create a separate glow effect. For example, to apply two glow effects to a link, you can use the following code:a {
box-shadow: 0 0 10px red, 0 0 20px blue;}
In this code, the link will have a red glow with a blur radius of 10px and a blue glow with a blur radius of 20px.
How can I make the glow effect appear on hover?
To make the glow effect appear on hover, you can use the ‘:hover’ pseudo-class in your CSS code. The ‘:hover’ pseudo-class selects an element when the user’s pointer is over it. For example, to apply the glow effect to a link only when it is hovered over, you can use the following code:a:hover {
box-shadow: 0 0 10px #09f;}
In this code, the glow effect will only appear when the link is hovered over.
Can I animate the glow effect?
Yes, you can animate the glow effect using CSS animations or transitions. For example, you can use the ‘transition’ property to animate the change in box-shadow when a link is hovered over. Here’s an example:a {
transition: box-shadow 0.3s ease;}a:hover {
box-shadow: 0 0 10px #09f;}
In this code, the glow effect will gradually appear over a duration of 0.3 seconds when the link is hovered over.
How can I apply the glow effect to text?
To apply the glow effect to text, you can use the ‘text-shadow’ property instead of the ‘box-shadow’ property. The ‘text-shadow’ property works similarly to the ‘box-shadow’ property, but it applies the shadow to the text of an element instead of the border. Here’s an example:a {
text-shadow: 0 0 10px #09f;}
In this code, the text of the link will have a glow effect.
Can I apply the glow effect to an image?
Yes, you can apply the glow effect to an image by using the ‘box-shadow’ property on the ‘img’ selector. Here’s an example:img {
box-shadow: 0 0 10px #09f;}
In this code, the image will have a glow effect.
How can I make the glow effect pulsate?
To make the glow effect pulsate, you can use CSS animations. You can create a keyframes animation that changes the box-shadow property over time, and then apply this animation to your element. Here’s an example:@keyframes pulsate {
0% { box-shadow: 0 0 10px #09f; }
50% { box-shadow: 0 0 20px #09f, 0 0 30px #09f; }
100% { box-shadow: 0 0 10px #09f; }}a {
animation: pulsate 1s infinite;}
In this code, the glow effect will pulsate every second.
Can I apply the glow effect to a specific side of an element?
The box-shadow property applies the shadow to all sides of an element. However, you can create the illusion of a shadow on a specific side by using large offsets and negative spread values. This requires some experimentation and may not work perfectly for all shapes and sizes of elements.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
