CODEWITHSUNDEEP
htmlcssbuttonhoverborder
John Makati
John Makati

Reputation: 81

Change button border on hover

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?

HTML

<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda"
/>

CSS

.button {
          margin-right: 20px;
          width:300px;
          height:300px;
          background-color: transparent;
          border:none;
  
  .button:hover {
        border:2px solid #0000ff;
        border-radius: 20px;
            }

Upvotes: 0

Views: 11471

Answers (4)

Rishi Bajpai
Rishi Bajpai

Reputation: 1

To make the transition even smoother, you can try adding a CSS transition. So, the user doesn't get surprised after seeing the border animated.

.button:hover {
    border: 2px slid #0000ff;
    transition: border 0.4s ease-in;
    border-radius: 20px;
}

Upvotes: 0

DCR
DCR

Reputation: 15657

.button {
          margin-right: 20px;
          width:300px;
          height:300px;
          background-color: transparent;
          border:none;
  }
  .button:hover {
        border: 2px solid  blue;
        border-radius: 20px;
        cursor:pointer;
            }
<input type="button" class = "button"   value="Panda"
/>

Upvotes: 2

Brebber
Brebber

Reputation: 3064

The border on hover will appear if you add the closing bracket to your css rule button. You just missed that ;-)

Concerning the changing of the images I am not sure if I did understand it right ... but at the end: without the JS code cannot be said much about it. Here it would be helpfull if you could show the JS code ;-)

.button {
          margin-right: 20px;
          width:300px;
          height:300px;
          background-color: transparent;
          border:none;

} /* <<< add missing bracket here */
  
  .button:hover {
        border:2px solid #0000ff;
        border-radius: 20px;
            }

Upvotes: 0

MinorFourChord
MinorFourChord

Reputation: 280

Missing closing bracket }

.button {
  margin-right: 20px;
  width:300px;
  height:300px;
  background-color: transparent;
  border:none;
}
  
.button:hover {
  border:2px solid #0000ff;
  border-radius: 20px;
}
<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda" />

Upvotes: 0

Related Questions