Button color change

user_13793056 0
Viewed 70

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>

css html
6 Answers

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>
user_138211060

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>

user_76530070

This should work:

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

enter image description here

user_126632200

Try with background-color property

#sub {
    background-color: black;
    color: white;
}
user_138066170 
#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.)

user_61622300

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;

user_121080660
Related