title: Change button border on hover
body: <p>I am having trouble getting my hover to work on my button. I want my button to not have a border but to display a blue border when my mouse is on top of it. I also need it to change the image when the mouse is not top but that has been sorted, therefore the changeImage function :). Just need help with the border, any suggestions?</p>
  <p>HTML</p>
  <pre><code>&lt;input type=&quot;button&quot; class = &quot;button&quot; onclick=&quot;changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')&quot; onmouseover=&quot;changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')&quot; value=&quot;Panda&quot;
  /&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.button {
            margin-right: 20px;
            width:300px;
            height:300px;
            background-color: transparent;
            border:none;
    
    .button:hover {
          border:2px solid #0000ff;
          border-radius: 20px;
              }
  </code></pre>