CODEWITHSUNDEEP
htmlcsshover
Krystian123
Krystian123

Reputation: 41

Hover effect not responding in css

Hello can someone help me with hover effect in .todo-button:hover I tried a lot of versions but nothing seems to work i mean zero response from a browser :( There must be some mistake in .todo-button construction it seems

* {
  box-sizing: flex-box;
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.todo-button {
  width: 100px;
  padding: 16px;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  outline: none;
  background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100%);
  color: #fff;
  text-transform: capitalize;
}

.todo-button:hover {
  background-color: #3e8e41;
}

Upvotes: 1

Views: 65

Answers (2)

Makwana Prahlad
Makwana Prahlad

Reputation: 969

plz try this code

* {
  box-sizing: flex-box;
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.todo-button {
  width: 100px;
  padding: 16px;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  outline: none;
  background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100%);
  color: #fff;
  text-transform: capitalize;
}


.todo-button:hover
{
    background: #3e8e41;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        
    </style>
    <title>Document</title>
</head>
<body>
    <button name="btn" class="todo-button">submit

    </button>
</body>
</html>

Upvotes: 0

Brebber
Brebber

Reputation: 3054

In your class you use property background which overwrites the property background-color even it is used in a hover class. Just change hover class to:

.todo-button:hover {
  background: #3e8e41;
}

Upvotes: 2

Related Questions