CODEWITHSUNDEEP
javascripthtmlcss
Gmanc2
Gmanc2

Reputation: 13

CSS button image :hover

<!doctype html>

<title>Site Maintenance</title>
<style>
body { text-align: center; padding: 150px; background: #666a73; }
body { font: 20px Helvetica, sans-serif; color: #666a73; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
#button1 {
height: 50px;
width: 250px;
}
#button1:hover {
width: 300px;
height: 74px;
}
#button1:visited {
width: 0px;
height: 0px;
}

</style>
<body>
<article>
<div>
<a href="test"><input type="image" id="button1"          
style="height:50px;width:250px;" src="button.png" /></a>
</div> 
</article>
</body>

Does anyone have an Idea why the on hover event doesn't work? Im not sure why its not srinking the button to size 0,0 or why it doesnt on hover enlarge it.

Upvotes: 0

Views: 93

Answers (4)

Bharoo Jangid
Bharoo Jangid

Reputation: 282

try this

https://jsfiddle.net/fnkq0b7r/2/

<!doctype html>

<title>Site Maintenance</title>
<style>
body { text-align: center; padding: 150px; background: #666a73; }
body { font: 20px Helvetica, sans-serif; color: #666a73; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }

#button1 img{
height: 50px;
width: 250px;
}
#button1:hover img{
width: 300px;
 height: 74px;
 }
 </style>
 <body>

<div>
<a href="test"  id="button1">
 <img     src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
 </a>
 </div> 

</body>

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133360

Seems don't work because the type='image' don't change try using a type='button' like in the sample below 

<!doctype html>

  <title>Site Maintenance</title>
  <style>
  body { text-align: center; padding: 150px; background: #666a73; }
  body { font: 20px Helvetica, sans-serif; color: #666a73; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  #button1 {
  height: 50px;
  width: 250px;
  }
  #button1:hover { 
  min-width: 300px;
  min-height: 74px;
  }
  #button1:visited {
  width: 0px;
  height: 0px;
  }

  #button2 {
  height: 50px;
  width: 250px;
  }
  #button2:hover { 
  background-color : yellow;
  min-width: 300px;
  min-height: 74px;
  }
  #button2:visited {
  width: 0px;
  height: 0px;
  }


  </style>
  <body>
    <article>
      <div>
        <a href="test">
          <input type="image" id="button1"             style="height:50px; width:250px;" src="button.png" />
        </a>
      </div> 
       <div>
      <a href="test">
          <input type="button" id="button2"    value='TEST'         style="height:50px; width:250px;" src="button.png" />
        </a>
      </div>    
    </article>
  </body>

Upvotes: 0

Trevor
Trevor

Reputation: 1

You need to add !important after your css style changes to overwrite inline styles.

Upvotes: 0

mosesmeirelles
mosesmeirelles

Reputation: 427

You should remove your inline style from input element:

<input type="image" id="button1" src="button.png" />

Inline styles have priority over declared styles, including your :hover style.

body { text-align: center; padding: 150px; background: #666a73; }
body { font: 20px Helvetica, sans-serif; color: #666a73; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
#button1 {
height: 50px;
width: 250px;
}
#button1:hover {
width: 300px;
height: 74px;
}
#button1:visited {
width: 0px;
height: 0px;
}
<!doctype html>

<title>Site Maintenance</title>
<body>
<article>
<div>
<a href="test"><input type="image" id="button1" src="button.png" /></a>
</div> 
</article>
</body>

Upvotes: 2

Related Questions