Changing the shape and color of an arrow inside a button upon hovering

Question

I'm working on a button, here's the demo. Right now i'm stuck at two problems i can't figure out how to solve them.

First problem: In the demo you can see an arrow down icon on the right side. When you hover over the button it's supposed to show arrow up icon, but you can see the both arrows and i only want to show one of the arrows on hover.

I haven't learned javascript yet so i'm wondering if this is possible with CSS?

Second problem: You can also see that i've added a red color on hover, but the arrows doesn't change color upon hovering. The arrows only change color if you hover your mouse on the arrows

Is there any way I can make the text and arrow change color at the same time upon hovering?

Thanks in advance.

Answer 1

This can be done in a much more simple fashion. There is no need for the extra spans.

http://cssdeck.com/labs/cy1u4oeu

 <a class="language-icon fr" href="#" alt="choose-your-language">Language</a>

.language-icon {
color:#000;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
}

.fr {
  background: url(http://www.aventuredusucre.com/images/iconFrenchLanguage.gif) no-repeat;
}

.language-icon:hover {
color:#d13030;
}

.language-icon:before {
content:'';
width:0;
height:0;
position:absolute;
right:5px;
top:40%;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-top:4px solid #000;
}

.language-icon:hover:before {
border-top: none;
border-bottom:4px solid #d13030;
}

Answer 2

1) You need to tell the down arrow to hide on hover.

.language-icon:hover .arrow-down { display: none; }

2) You're telling the arrow on hover to be black. You need to tell it to be a different colour.

.language-icon:hover .arrow-up { border-bottom: 5px solid #d13030; }

Hope that helps.