Gradient glowing button using html and css-CodePudding

I've tried the codes for creating a glowing button on my webpage, but It's been done, below are some code which I tried.

     .button {
      background-color: #1c87c9;
      -webkit-border-radius: 60px;
      border-radius: 60px;
      border: none;
      color: #eeeeee;
      cursor: pointer;
      display: inline-block;
      font-family: sans-serif;
      font-size: 20px;
      padding: 5px 15px;
      text-align: center;
      text-decoration: none;
    }

<button > Hello World! </button

Please do help me to create this glowing button.

CodePudding user response：

change <button > Hello World! </button

to <button > Hello World! </button>

The css .button selector is looking for the . The . denotes class. Read more here

CodePudding user response：

In your CSS you're targeting a class name of "button", but your button has no class name! Try assigning the button a class name and then use that name in the CSS, like so:

.myButton {
  background-color: #1c87c9;
  -webkit-border-radius: 60px;
  border-radius: 60px;
  border: none;
  color: #eeeeee;
  cursor: pointer;
  display: inline-block;
  font-family: sans-serif;
  font-size: 20px;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
}

<button > Hello World! </button

CodePudding user response：

class value of the button is missing, also css must be in <style> .button{...} </style>

.button {
  background-color: #1c87c9;
  -webkit-border-radius: 60px;
  border-radius: 60px;
  border: none;
  color: #eeeeee;
  cursor: pointer;
  display: inline-block;
  font-family: sans-serif;
  font-size: 20px;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
}

<button > Hello World! </button>

CodePudding user response：

Use button instead of .button.

button {
    background-color: #1c87c9;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    border: none;
    color: #eeeeee;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 20px;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
}

<button>Hello World</button>

CodePudding user response：

If you want gradient glowing button you should use:

background-image: linear-gradient(firstcolor, secondcolor);

you could also add:

box-shadow: 1px 1px 10px yellow; (or any color that you want)