We would like to know how to create CSS Up Down Arrow for link button.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.main_link {<!-- w w w . j a v a 2 s .com-->
display: block;
padding: 10px 20px;
background-color: #333;
color: #FFF;
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;
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;
}
</style>
</head>
<body>
<a href="#" class="main_link">Click Here</a>
<a href="#" class="other_link">Flip The Arrow</a>
</body>
</html>
The code above is rendered as follows: