title: How to make button have a pop-up effect and border to have a white shadow when mouse hover above the button
body: <p><strong><em>Functionality:</em></strong></p>
  
  <p>The Button should have the following effect when user hover above the button:</p>
  
  <ul>
  <li>The Button should have a pop-up effect.</li>
  <li>The Button border should have white shadow effect.</li>
  </ul>
  
  <p><strong><em>What has been done:</em></strong></p>
  
  <p>I have made use of</p>
  
  <pre><code>img:hover{
              border-color: white;
          }
  </code></pre>
  
  <p>to try to get the effect of the a border shadow of white.</p>
  
  <p><strong><em>Issue:</em></strong></p>
  
  <p>I can't really seem to get the said effect. However, I was able to get the effect such as this : </p>
  
  <pre><code>img:hover{
              background-color: white;
          }
  </code></pre>
  
  <p>when user hover above the button.</p>
  
  <p>Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.</p>
  
  <p>Thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img:hover {
    border-color: white;
  }
  #Button1 {
    position: absolute;
    top: 310px;
    left: 1550px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="Button1" onclick="GreatLoveInSingapore()"&gt;
    &lt;img src="lib/img/GreatLoveButton.png"&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>