CSS: Hover a HTML submit button

Question

I'm trying to style a HTML submit button in CSS:

HTML:

<input type="submit" value="Yes" id="popUpYes">

CSS:

#popUpYes
{
  width: 60px;
  height: 30px;
  background-color: black;
}
#popUpYes:hover
{
  background-color: white;
}

The basic style works but the background does not change color on hover.

Just a warning to anyone reading... for me this problem appears to occur when using the Chrome 'device preview' - this is expected... your finger does not have a hover state on mobile — 1owk3y
– 1owk3y, Commented Dec 13, 2018 at 8:38

userDEV · Accepted Answer · 2013-09-03 19:30:03Z

4

Your original code works for me. Be sure you don't have any other conflicting styles inherited by the submit button.

answered Sep 3, 2013 at 19:30

userDEV

5554 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henry Ecker · Accepted Answer · 2022-05-06 03:35:45Z

3

Try this JSfiddle

Try this:

#popUpYes {
  width: 60px;
  height: 30px;
  background-color: black;
  color: white;
  /* SET COLOR IN WHITE */
}

#popUpYes:hover {
  background-color: white;
  color: black;
  /* SET COLOR IN BLACK */
}

<input type="submit" value="Yes" id="popUpYes">

You have to assign the color - attribute for the text.

edited May 6, 2022 at 3:35

Henry Ecker♦

35.8k19 gold badges48 silver badges67 bronze badges

answered Sep 3, 2013 at 18:34

Black Sheep

6,7047 gold badges32 silver badges51 bronze badges

Comments

Ryan M · Accepted Answer · 2022-05-06 03:37:11Z

2

I tried this in Chrome and it worked.

#popUpYes {
  width: 60px;
  height: 30px;
  background-color: black;
  color: #fff;
}

#popUpYes:hover {
  background-color: white;
}

<input type="submit" value="Yes" id="popUpYes">

edited May 6, 2022 at 3:37

Ryan M♦

20.6k35 gold badges76 silver badges85 bronze badges

answered Sep 3, 2013 at 18:39

dotNetE

6161 gold badge6 silver badges28 bronze badges

Comments

Anoop B.K · Accepted Answer · 2015-08-17 06:59:24Z

0

As per your question "The basic style works but the background does not change color on hover." , this happens only when you set your BackColor or background-color through properties. your code works fine because you have used css class instead of properties.

answered Aug 17, 2015 at 6:59

Anoop B.K

1,4802 gold badges17 silver badges32 bronze badges

Comments

Henry Ecker · Accepted Answer · 2022-05-06 03:36:22Z

0

The code as it is now working -> http://jsfiddle.net/2wYqd/ What is your browser?

#popUpYes {
  width: 60px;
  height: 30px;
  background-color: black;
}
#popUpYes:hover {
  background-color: white;
}

edited May 6, 2022 at 3:36

Henry Ecker♦

35.8k19 gold badges48 silver badges67 bronze badges

answered Sep 3, 2013 at 18:33

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Comments

Henry Ecker · Accepted Answer · 2022-05-06 03:37:56Z

0

My work may be of use to you in this regard.

input[type=submit] {
  background-color: #42b72a;
  color: white;
  border: 5px solid #42b72a;
  width: 200px;
}

#kayitol:hover {
  box-shadow: 0 0 10px #0099ff;
  font-weight: bold;
  color: black;
}

input[type=reset] {
  background-color: #FF8A80;
  color: white;
  border: 5px solid #FF8A80;
  width: 120px;
}

#iptal:hover {
  box-shadow: 0 0 10px #FF3C41;
  font-weight: bold;
  color: black;
}

<input type="submit" id="kayitol" value="Kayıt Ol">
<input type="reset" id="iptal" value="Vaz Geçtim">

edited May 6, 2022 at 3:37

Henry Ecker♦

35.8k19 gold badges48 silver badges67 bronze badges

answered Apr 29, 2022 at 3:35

Mesut

11 bronze badge

2 Comments

geertjanknapen Over a year ago

Perhaps you could provide more information as to why this would be the answer to the question. What does the code do etc.

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Henry Ecker · Accepted Answer · 2022-05-06 03:38:12Z

0

Working fine link

#popUpYes {
   width: 60px;
   height: 30px;
   background-color: black;
   color:white;
}
#popUpYes:hover {
   background-color: white;
   color: black;
}

edited May 6, 2022 at 3:38

Henry Ecker♦

35.8k19 gold badges48 silver badges67 bronze badges

answered Sep 3, 2013 at 18:35

Naveen Kumar Alone

7,6985 gold badges40 silver badges59 bronze badges

Collectives™ on Stack Overflow

CSS: Hover a HTML submit button

7 Answers 7

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related