title: CSS buttons with 2 background colors
body: <p>I am having a problem with creating a button that has 2 colors with 3 states with a structure as follows:</p>
  
  <p>| bgcolor1 (white-text) | bgcolor2 (white-arrow) | normal state</p>
  
  <p>| bgcolor2 (white-text) | bgcolor2 (white-arrow) | hover state</p>
  
  <p>| bgcolor3 (white-text) | bgcolor4 (white-arrow) | active state</p>
  
  <p>my approach was to use the main color as bg color, and make the arrow with the seperate background color a background image. The problem I had there was with the third state of the arrow, which had a different background color. </p>
  
  <p>could this be achieved with pure css?</p>
  
  <p>can use a single code snippet for buttons with both single line and multiple line text?</p>
  
  <p>thank you for your time on helping!</p>