title: CSS making a button's background-color two different solid colors NOT gradient
body: <p>How could I make a background of a button two solid colors? Please see examples below.</p>
  <p>The overall aim is for the button to transition from the two shades of blue to the two shades of grey upon hover.</p>
  <p><img src="https://i.stack.imgur.com/5Pagv.png" alt="background two solid colors" />
  <img src="https://i.stack.imgur.com/bAlCe.png" alt="on hover" /></p>
  <p>Colors:</p>
  <ul>
  <li>blue: <code>#4098D3</code> (light), <code>#2B8DCF</code> (dark)</li>
  <li>grey: <code>#515758</code> (light), <code>#2B8DCF</code> (dark)</li>
  </ul>
  <p>HTML button syntax: <code>&lt;button class=&quot;submit&quot;&gt;&lt;/submit&gt;</code></p>
  <p>CSS:</p>
  <pre><code>button.submit {
          [background CSS from this question] }
  
  button.submit:hover {
          [background CSS from this question with alternate colors]
          cursor: pointer; 
          -webkit-transition: background 0.5s linear;
          -moz-transition: background 0.5s linear;
          -ms-transition: background 0.5s linear;
          -o-transition: background 0.5s linear;
          transition: background 0.5s linear;
  }
  </code></pre>
  <p>Feel free to use this <a href="https://jsfiddle.net/DMc9N/" rel="nofollow noreferrer">JSFiddle</a> I have setup for this query: <a href="https://jsfiddle.net/DMc9N/" rel="nofollow noreferrer">https://jsfiddle.net/DMc9N/</a></p>
  <p>Your help is hugely appreciated</p>