Discussion :

[hala romeila]

salut tos le monde je suis nouveau ici
j'ai une question s'il est possible

le suis entrain de creer un site web qui contient des bouton donc je travaile avec la balise <button>
mais le probleme c'est lors la modification de style
si je change le style d'un bouton les autres bouton changent

comment je peux faire
voila mon code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 <button type="button" class="btn btn-ordinateur"></button>
 
 
		   <button type="button" class="btn btn-moniteur"></button>
 
 
		   <button type="button" class="btn btn-peripherique"></button>
 
			<button type="button" class="btn btn-routeur">4</button>

le code css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
button {
    background-image:url(../images/ord.jpg); 
	background-color: transparent;
	background-repeat:no-repeat;
    background-position:100% 0;
    border: none;
    color: white;
	width:170px;
	height:120px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 30px;
	border-radius: 14px;
	overflow:hidden;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 
}

aidez moi svp

[Invité]

Bonjour,

button { ... } définit toutes les balises <button>.

tu peux appliquer les styles CSS sur :

• un bouton en particulier -> .btn-moniteur { ... }
• ou sur plusieurs (ayant la même classe "btn") -> .btn { ... }

remarque :
pour identifier un élément de façon UNIQUE, on utilise un id au lieu qu'une classe.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="button" class="btn" id="btn-moniteur"></button>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

#btn-moniteur { ... }

[hala romeila]

emm j'ai essayé avec ça mais sa marche pas

[Jacques Beauregard]

Qu'as-tu essayé?
Qu'est ce qui ne marche pas ?

Ce que Jreaux t'a indiqué constitue la base du CSS. Il serait bien d'aller voir cela :

http://css.developpez.com/tutoriels/premiers-pas/

Cordialement.

[hala romeila]

j'ai essayé de donner un id a mon bouton mais ça ne marche pas

[Invité]

"ça ne marche pas" ne nous avance à rien.

Montre-nous le code !