title: Changing the shape and color of an arrow inside a button upon hovering
body: <p>I'm working on a button, here's the <a href="http://cssdeck.com/labs/cxywggus" rel="nofollow">demo</a>. Right now i'm stuck at two problems i can't figure out how to solve them.</p>
  
  <p><strong>First problem:</strong> 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. </p>
  
  <p>I haven't learned javascript yet so i'm wondering if this is possible with CSS?</p>
  
  <p><strong>Second problem:</strong> 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</p>
  
  <p>Is there any way I can make the text and arrow change color at the same time upon hovering?</p>
  
  <p>Thanks in advance.</p>