CSS Arrows

Est. Reading Time: 1 minute

This CSS trick gives nice arrows for link indicators or just a nice graphical touch that is different from the standard arrow entity. This works cross-browser as well. The only drawback is that it uses absolute positioning to make it all come together. So if you’re making a 508 compliant site you’ll want to use a graphic or the simple arrow entity.

The code below is a base example. You can do whatever you like for styling and color changes as well.

a { background: #bbb; background: -moz-linear-gradient(top, #efefef 0%, #bbb 100%); background: -o-linear-gradient(top, #efefef 0%, #bbb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efefef), color-stop(100%, #bbb)); background: -webkit-linear-gradient(top, #efefef 0%, #bbb 100%); background: linear-gradient(top, #efefef 0%, #bbb 100%); border: 1px solid #aaa; color: #c00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 10px 25px 10px 10px; position: relative; text-decoration: none;}

a:before, a:after { border-right: 2px solid; content: ”; display: block; height: 8px; margin-top: -6px; position: absolute; -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); right: 10px; top: 50%; width: 0;}

a:after { margin-top: -1px; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}

a:hover, a:focus, a:hover:before, a:hover:after, a:focus:before, a:focus:after { color: #000;}

You can view the source and test it out on JSFiddle.