Solution 1 :

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


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).


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;

Solution 2 :

button {
  background-color: red;
button:hover {
  background-color: orange;
button#b:hover {
  transition: 1s;
Immediate change
<button>Hello World</button>


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

Solution 3 :

I have copied the heart icon from

  display: flex;
  align-items: center;
  color: red; 
  cursor: pointer;
  border-radius: 50px;
  padding: 0 10px;

  color: orange;

  margin-left: 5px;
<!DOCTYPE html>
<html lang="en">
    <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>
  <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"/>   

  <button class="heart-btn">
    <svg width="24px" height="24px">
      <use xlink_href="#my-icon"></use>
      <div class="label">Love it</div>


Problem :

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.