Changing Html button color

Question

I am trying to create a donate button for our school website and so far its gone good, But my teacher asked for me to possibly find a way to change the button color, I was wondering how I could do exactly that, and does it have to be specific colors ?

Here is my code:

<form action="http://google.com">
      <input type="submit" value="Donate!" style="font-size:99px;height: 180px; width: 700px"/>
</form>

which colour needs changing? background-color, font-color, border-color? — Pete
– Pete, Commented Mar 21, 2018 at 14:32
while I appreciate that you may be new to web development - and, if you are then welcome! - but have you tried anything? This seems to be a question easily resolved via a search engine. — David Thomas
– David Thomas, Commented Mar 21, 2018 at 14:38

J Schouten · Accepted Answer · 2018-03-21 14:38:54Z

3

To change the background color of an element, you can use the CSS property "background", or "background-color". Some colors have a color name equivalent, but you can get more specific by using hexadecimal colors. There are many websites that can help you find an exact color, such as https://htmlcolorcodes.com.

Here's an example with a red background:

With the color name: <input type="submit" value="Donate!" style="font-size:99px;height: 180px; width: 700px; background: red"/>

With a hexadecimal color: <input type="submit" value="Donate!" style="font-size:99px;height: 180px; width: 700px; background: #FF0000"/>

answered Mar 21, 2018 at 14:38

J Schouten

312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes · Accepted Answer · 2018-03-21 14:34:42Z

1

Just use a background-color:

<form action="http://google.com">

<input type="submit" value="Donate!" style="font-size:99px;height: 180px; width: 700px;background-color: green;"/>
</form>

answered Mar 21, 2018 at 14:34

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Comments

Pierre-Adrien Maison · Accepted Answer · 2018-03-21 14:34:57Z

1

For the background color you can use the "background-color" property like that :

<form action="http://google.com">
    <input type="submit" value="Donate!" style="background-color: #ff6666; font-size:99px;height: 180px; width: 700px"/>
</form>

You can get the color codes online (http://www.color-hex.com/)

answered Mar 21, 2018 at 14:34

Pierre-Adrien Maison

6207 silver badges17 bronze badges

Comments

Ali NajafZadeh · Accepted Answer · 2021-08-26 16:11:01Z

1

Please try this follow code:

$("#button").click(function() {
  $("#button").addClass('button-clicked');
});

.button-clicked {
  background: red;
  font-size:99px;
  height: 180px; 
  width: 700px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="https://www.google.com">
      <input type="submit" id="button" value="Donate!" />
</form>

answered Aug 26, 2021 at 16:11

Ali NajafZadeh

517 silver badges20 bronze badges

Comments

AliNajafZadeh · Accepted Answer · 2022-08-07 05:25:56Z

Try following code:

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn2 {background-color: #008CBA;} /* Blue */
.btn3 {background-color: #f44336;} /* Red */ 
.btn4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.btn5 {background-color: #555555;} /* Black */

<form action="http://google.com">
      <input type="submit" value="Donate!" class="button" style="font-size:99px;height: 180px; width: 700px"/>
</form>    

<form action="http://google.com">
      <input type="submit" value="Donate!" class="button btn2" style="font-size:99px;height: 180px; width: 700px"/>
</form>    

<form action="http://google.com">
      <input type="submit" value="Donate!" class="button btn3" style="font-size:99px;height: 180px; width: 700px"/>
</form>    

<form action="http://google.com">
      <input type="submit" value="Donate!" class="button btn4" style="font-size:99px;height: 180px; width: 700px"/>
</form>    

<form action="http://google.com">
      <input type="submit" value="Donate!" class="button btn5" style="font-size:99px;height: 180px; width: 700px"/>
</form>

Collectives™ on Stack Overflow

Changing Html button color

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related