Gradient glowing button using html and css [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
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 class=""> Hello World! </button
Please do help me to create this glowing button.

Answer 1

change <button class=""> Hello World! </button
to <button class="button"> Hello World! </button>
The css .button selector is looking for the class="button". The . denotes class. Read more here

Answer 2

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)

Answer 3

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 class="myButton"> Hello World! </button

Answer 4

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 class="button"> Hello World! </button>

Answer 5

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>