title: how to make lightning button using css
body: <p>I have a button and I need it to be lightning on hover</p>
  
  <pre><code>    .button {
      font-size: 16px;
      position: relative;
      top: 20%;
      background: #fcffdc;
      color: #de204f;
      border: none;
      border-radius: 3px;
      font-weight: bold;
      text-transform: uppercase;
      text-align: center;
    padding: 20px 20px 14px 20px;
    &amp;:hover {
      background: #fcffdc;
      cursor: pointer;
      box-shadow: -4px -4px 4px rgba(250, 0, 20, 0.4);
  </code></pre>
  
  <p>But it has only a shadow in front of the button. How do a shadow all over the button?</p>