Comment faire des boutons différents dans css?

Donc maintenant j'ai un bouton, ce qui est ce que le bouton ressemble en ce moment:Comment faire des boutons différents dans css?

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

Maintenant que je veux plus de trois boutons. Ils ont tous la même apparence sauf qu'en plus de mon bouton bleu, l'un est rouge, l'autre est jaune et le quatrième bouton est vert. Comment puis-je créer ces nouveaux boutons dans css?

Source

2017-10-20 Zevvysan

utiliser des classes CSS, puis les référencer comme 'input.button_blue',' input.button_red' , 'input.button_yellow',' input.button_green' – Moseleyi

Vous ne savez pas pourquoi les downvotes, Je pense que c'est une bonne question sur la bonne pratique qui met en évidence le cœur de ce qu'est une «classe» – wunth

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

Essayez d'utiliser class

Source

2017-10-20 02:35:13 zynkn

Vous pouvez définir des classes de couleurs et les placer dans votre propriété de classe de bouton.

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

Source

2017-10-20 02:34:53 Eric

cher ok vous avez différentes méthodes

1 er un

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

 
\t } 
 
\t .yellow 
 
\t { 
 
\t \t background-color: yellow; 
 
\t } 
 
\t .green 
 
\t { 
 
\t \t background-color: green; 
 
\t }

<input class="blue" type="button" name=""> 
 
\t <input class="red" type="button" name=""> 
 
\t <input class="yellow" type="button" name=""> 
 
\t <input class="green" type="button" name="">

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

<input type="button" name="" style="background-color: green;"> 
 
\t <input type="button" name="" style="background-color: blue;"> 
 
\t <input type="button" name="" style="background-color: yellow;"> 
 
\t <input type="button" name="" style="background-color: red;">

Source

2017-10-20 03:19:59

Comment faire des boutons différents dans css?

Répondre

Questions connexes