CODEWITHSUNDEEP
htmlcss
6th PSIS Xander R Mooney
6th PSIS Xander R Mooney

Reputation: 23

Changing Html button color

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>

Upvotes: 2

Views: 5294

Answers (5)

AliNajafZadeh
AliNajafZadeh

Reputation: 1328

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>

Upvotes: 1

Ali NajafZadeh
Ali NajafZadeh

Reputation: 51

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>

Upvotes: 1

J Schouten
J Schouten

Reputation: 31

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"/>

Upvotes: 3

Pierre-Adrien Maison
Pierre-Adrien Maison

Reputation: 610

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/)

Upvotes: 1

Johannes
Johannes

Reputation: 67738

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>

Upvotes: 1

Related Questions