title: How to invert colors using CSS on hover
body: <p>I'm trying to make interactive cart buttons using CSS stylings. I want my "add to cart" button to invert colors (black n white only) on hover to enhance user experience.</p>
  
  <p>CSS style: </p>
  
  <pre><code>.ryanAddButton {
    display:       inline-block;
    padding:       8px 0px;
    width:          390px;
    background:    -moz-linear-gradient(#000, #000);
    background:    -o-linear-gradient(#000, #000);
    background:    -webkit-linear-gradient(#000, #000);
    background:    linear-gradient(#000, #000);
    color:         #fff;
    font:          normal 700 20px/1 "Calibri", sans-serif;
    text-align:    center;
    text-shadow:   1px 1px 0 #000;
  }
  ryanAddButton:hover {
    background-color:white;
    color:black;
  }
  </code></pre>
  
  <p>HTML snippet of the button: </p>
  
  <pre><code>&lt;p  class ="ryanAddButton"&gt;Add to Cart&lt;/p&gt;
  </code></pre>