Question 160943 in Html Question posted in
Some basic documentation can be found here.

Can CSS edit a HTML button’s style?

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search