can't edit button style with css

Question

my css don't work:

.arthur{
  width: 100%;
  height: auto;
}

.easy {
  background-color: #4CAF50; 
}

.medium {
  background-color: #FFC107; 
}

.myButton {
  background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
  background-color:#44c767;
  border-radius:28px;
  border:1px solid #18ab29;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:17px;
  padding:16px 31px;
  text-decoration:none;
  text-shadow:0px 1px 0px #2f6627;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
  <title>Jeux d'arcade</title>
  </head>
  <link rel="stylesheet" type="text/css" href="bouton.css">
  <body>
    <img src="arcade.jpg" id="arthur">
    <h1>Jeux d'arcade</h1>
    <p>Sélectionnez le niveau de difficulté :</p>
    <a href="#" id="myButton">Facile</a>
    <button id="medium">Normal</button>
  </body>
</html>

try re-link css to html, try change the ids, and thought about replacing button with <a> the css is properly linked to my html however, it appears that I can't add style to the button, <a> don't change whatever I do

I changed class names in the snippet to make it works fine. As the given text ask to replace it, maybe it's not a typo. Hope I didn't something wrong — Elikill58, May 09 '23 at 19:02
@Elikill58 you've changed the question by removing the very issue they were asking about. — Daniel Beck, May 09 '23 at 19:02
@DanielBeck if the issue is only the #, the question is a typo — Elikill58, May 09 '23 at 19:03
I've rolled back your edit. Please don't "correct" errors in a question, they're very likely the reason for the question in the first place. — Daniel Beck, May 09 '23 at 19:05
Rolled back the preceding edit as well, because they did the same thing — Daniel Beck, May 09 '23 at 19:07
Does this answer your question? [What's the difference between an id and a class?](https://stackoverflow.com/questions/544010/whats-the-difference-between-an-id-and-a-class) — Elikill58, May 09 '23 at 19:33
@DanielBeck Sad for the snippet. But this question is duplicate also of [this](https://stackoverflow.com/q/12889362/10952503), [this](https://stackoverflow.com/q/47256387/10952503), or some others and it's also a typo ... — Elikill58, May 09 '23 at 19:35
It's not a typo, it's a consistent mistake the user is making. Agreed on the duplicate you pointed out, though. — Daniel Beck, May 09 '23 at 20:20

score 3 · Answer 1 · answered May 09 '23 at 18:59

Welcome to StackOverflow!

Seems like your CSS selector myButton is only targeting elements which have the class myButton assigned. Currently your a-tag only has the id of myButton assigned.

To get it running, adapt your a-tag e.g. by exchanging id for class like so:

<a href="#" class="myButton">Facile</a>

score 3 · Answer 2 · answered May 09 '23 at 19:00

You got the selectors . and # mixed up. In your CSS part change .myButton to #myButton and .medium to #medium OR in your HTML part <a href="#" id="myButton">Facile</a> to <a href="#" class="myButton">Facile</a> and <button id="medium">Normal</button> to <button class="medium">Normal</button>. You can read more about selectors here https://css.maxdesign.com.au/selectutorial/

can't edit button style with css

2 Answers2