CODEWITHSUNDEEP
htmlcss
kaidunklin
kaidunklin

Reputation: 49

Button color change

I want to change the color on my submit button but not the words. There is no button-color option in css. This is for my personal about me page for coding camp. Having trouble finding answers. Here is my code.

#sub{
    color: black;

}
<form action="/action_page.php">
        <input type="checkbox" id="vehicle1" name="vehicle1" value="summer">
        <label for="vehicle1"> I like summer.</label><br>
        <input type="checkbox" id="vehicle2" name="vehicle2" value="phone">
        <label for="vehicle2"> I have a phone.</label><br>
        <input type="checkbox" id="vehicle3" name="vehicle3" value="bugs">
        <label for="vehicle3"> I dont like bugs.</label><br><br>
        <input type="submit" value="Submit"id="sub">
      </form>

Upvotes: 2

Views: 104

Answers (6)

David Reke
David Reke

Reputation: 555

You wouldn't set the color of the button. You would set the color of three different aspects of the button.

  1. Set the color of the button's text

    color: red;

  2. Set the color of the button's background

    background-color: red;

  3. Set the color of the button's border

    border: 1px solid red;

Upvotes: 0

Guest2819
Guest2819

Reputation: 53

I'm pretty sure you set background-color. And for the text color inside the button you put color.

#sub{
    background-color: black;
    color: gold;
}

<form action="/action_page.php">
        <input type="checkbox" id="vehicle1" name="vehicle1" value="summer">
        <label for="vehicle1"> I like summer.</label><br>
        <input type="checkbox" id="vehicle2" name="vehicle2" value="phone">
        <label for="vehicle2"> I have a phone.</label><br>
        <input type="checkbox" id="vehicle3" name="vehicle3" value="bugs">
        <label for="vehicle3"> I dont like bugs.</label><br><br>
        <input type="submit" value="Submit"id="sub">
      </form>

Upvotes: 2

CYr
CYr

Reputation: 347

This should work:

#sub{
  background-color: black !important;
  color: white;
}

enter image description here

Upvotes: 1

Reviresco
Reviresco

Reputation: 7

#sub {
  background-color: black;
  color: white;
  border: none;
  border-radius: .2em;
  font-size: 1rem;
}

(I added some other stuff in there to make it look nice.)

Upvotes: 0

barwicki
barwicki

Reputation: 1

Try with background-color property

#sub {
    background-color: black;
    color: white;
}

Upvotes: 0

yinsweet
yinsweet

Reputation: 2851

You may change it with background-color property.

#sub {
  color: black;
  background-color: tomato;
}
<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="summer">
  <label for="vehicle1"> I like summer.</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="phone">
  <label for="vehicle2"> I have a phone.</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="bugs">
  <label for="vehicle3"> I dont like bugs.</label><br><br>
  <input type="submit" value="Submit" id="sub">
</form>

Upvotes: 1

Related Questions