Así que ahora tengo un botón y así es como se ve ese botón en este momento:

input[type=button] {
    background: blue;
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
}

Ahora digamos que quiero tres botones más. Todos se ven iguales excepto que además de mi botón azul, uno es rojo, otro es amarillo y el cuarto botón es verde. ¿Cómo hago para crear estos nuevos botones en CSS?

0
Zevvysan 20 oct. 2017 a las 05:28

3 respuestas

La mejor respuesta
input[type=button] {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
.yellow{
  background-color: yellow;
}
<input type="button" class="red"/>

<input type="button" class="blue"/>

<input type="button" class="yellow"/>

Intenta usar class

1
jinongun 20 oct. 2017 a las 02:35

Puede definir clases de color y ponerlo en su propiedad de clase de botón.

input[type=button] {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
}
.blue{
    background: blue;
}
.red{
    background: red;
}
.yellow{
    background: yellow;
}
.green{
    background: green;
}

Html:

<input type="button" class="red" value="Red button">
<input type="button" class="blue" value="Blue button">
<input type="button" class="green" value="Green button">
<input type="button" class="yellow" value="Yellow button">
1
Eric 20 oct. 2017 a las 02:34

Ok querida tienes diferentes métodos

1er uno

input[type=button]
	 {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
	 }
	 .blue 
	 {
	 	background-color: blue;
	 }
	 .red
	 {
	 	background-color: red;

	 }
	 .yellow
	 {
	 	background-color: yellow;
	 }
	 .green
	 {
	 	background-color: green;
	 }
  <input class="blue" type="button" name="">
	<input class="red" type="button" name="">
	<input class="yellow" type="button" name="">
	<input class="green" type="button" name="">

2do uno

input[type=button]
	 {
    width: 10%;
    font-size: 25px;
    font-weight: bold;
    margin: 0.5%;
	 }
  <input  type="button" name="" style="background-color: green;">
	<input  type="button" name="" style="background-color: blue;">
	<input  type="button" name="" style="background-color: yellow;">
	<input  type="button" name="" style="background-color: red;">
1
lathi pramuditha 20 oct. 2017 a las 03:19