CSS Down Arrow

by Pete Fecteau

HTML

<a href="#" class="main_link">Click Here</a>
<br />
<br />
<a href="#" class="other_link">Flip The Arrow</a>

CSS

.main_link {
    display:block;
    padding:10px 20px;
    background-color: #333;
    color: #FFF;
    font-family: 'Helvetica', Arial, san-serif;
    text-decoration:none;
    margin:20px 20px 0 20px;
    width:120px;
}
.main_link:hover {
    color:#CCC;
}
.main_link:after {
    clear:both;
    display:block;
    position:relative;
    top:-6px;
    left:110px;
    content: "";
    height:0;
    width:0;
    padding:0;
    margin:-8px;
    border:8px solid transparent;
    border-top-color:#FFF;
}
.main_link:hover:after {
    border-top-color:#CCC;
}

.other_link {
    display:block;
    padding:10px 20px;
    background-color: #333;
    color: #FFF;
    font-family: 'Helvetica', Arial, san-serif;
    text-decoration:none;
    margin:0 20px;
    width:145px;
}
.other_link:hover {
    color:#CCC;
}
.other_link:after {
    clear:both;
    display:block;
    position:relative;
    top:-6px;
    left:135px;
    content: "";
    height:0;
    width:0;
    padding:0;
    margin:-8px;
    border:8px solid transparent;
    border-top-color:#FFF;
}
.other_link:hover:after {
    clear:both;
    display:block;
    position:relative;
    top:-15px;
    left:135px;
    content: "";
    height:0;
    width:0;
    padding:0;
    margin:-8px;
    border:8px solid transparent;
    border-bottom-color:#CCC;
    border-top-color:transparent;
}