How to create color changing button with html and css-CodePudding

I need to know how can I create a button, that has red color in starting but when get the mouse to it, it changes to orange.

I need to create button like this for my website.

CodePudding user response：

You should look into CSS pseudo-class, and transitions.

:hover

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

transition

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

button {
  background: red;
  transition: background 300ms ease-in-out;
}

button:hover {
  background: orange;
}

<button>Simple</button>

CodePudding user response：

button {
  background-color: red;
}
button:hover {
  background-color: orange;
}
button#b:hover {
  transition: 1s;
}

Immediate change
<button>Hello World</button>

<br><br>

Change with transition
<button id="b">Hello World</button>

CodePudding user response：

I have copied the heart icon from https://remixicon.com/

.heart-btn{
  display: flex;
  align-items: center;
  color: red; 
  cursor: pointer;
  border-radius: 50px;
  padding: 0 10px;
}

.heart-btn:hover{
  color: orange;
}

.label{
  margin-left: 5px;
}

<!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">
    <title>Button color</title>
  </head>
  <body>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="display: none;">
    <symbol id="my-icon" viewBox="0 0 24 24">
      <path fill="none" d="M0 0H24V24H0z"/>
      <path fill="currentColor" d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z"/>   
    </symbol>
  </svg>

  <button >
    <svg width="24px" height="24px">
      <use xlink:href="#my-icon"></use>
    </svg>
      <div >Love it</div>
  </button>

  </body>
</html>