"Bouton" Fusionner fonction et style (Débutant)

AlexandrePP
Les bases HTML/CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.

Mon bouton d'impression --------
"<form>
  <input id="impression" name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette page" />
</form>"

Mon style de bouton -------
<style>
.bouton {
  background-color: #008000;
  border: none;
  color: white;
  padding: 10px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
</style>

Ce que je veux

Bonjour, je souhaiterai modifier l'apparence d'un bouton d'impression. Je ne comprends pas comment fusionner la fonction du bouton avec un style. Je vous remercie de votre aide !!!

Ce que j'obtiens

J'obtiens un bouton qui ne change pas de couleur. Probablement à cause du mauvais rassemblent de ces 2 codes. Merci !!

10 réponses

Curvata
Réponse acceptée

(Uniquement l'élément avec l'id impression)

<form>
  <input id="impression" name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette page" />
</form>

<style>
#impression {
  background-color: #008000;
  border: none;
  color: white;
  padding: 10px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
</style>

OU

(Les éléments avec la class button)

<form>
  <input class="button" name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette page" />
</form>

<style>
.button {
  background-color: #008000;
  border: none;
  color: white;
  padding: 10px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
</style>

OU

(Les éléments input de type button)

<form>
    <input name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette page" />
  </form>

  <style>
  input[type='button'] {
    background-color: #008000;
    border: none;
    color: white;
    padding: 10px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
  }
  </style>

Je te conseille de suivre les formations CSS de Grafiart, les sélecteurs c'est la base.

Curvata

Bonjour,

la class bouton n'existe pas, utilises #impression comme selecteur

AlexandrePP
Auteur

Je n'ai pas vraiment compris votre réponse. Désolé

Curvata

a la place de .bouton, tu fais #impression

Azorgh

Salut,

Pour t'expliquer un peu, ton CSS (ce qui définit le style de ton bouton dans ton cas) pointe vers un élément.
Cet élément est .bouton.

Celà veut dire qu'il va chercher tous les éléments sur la page, qui ont la class "bouton".

Hors ici, ton input (qui est un bouton) n'a pas la classe "bouton".

2 solutions s'offrent à toi :

  • Ajouter la classe "bouton" sur ton input
  • Changer le sélecteur CSS pour qu'il "pointe" vers le bon élément

La deuxième solution t'est expliquée par Curvata.

AlexandrePP
Auteur

Merci beaucoup pour vos réponses, c'est plus clair, j'ai compris.

Quand je mets le code dans un visuliazer par compte je me retrouve avec le même soucis, en changeant d'input donc.... : PS: J'ai changé le code d'impression

<style>
.button {
background-color: #CF0063;
border: none;
color: white;
padding: 10px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
cursor: pointer;
}
</style>

<form>
<input type="button" value="Imprimer" onClick="window.print()">
</form>

Azorgh

Au vu de ta réponse je dirais que tu n'as pas compris !

Il faut savoir que <button> et <input type="button"> sont déjà deux choses différentes.

Là, ton CSS sera appliqué sur n'importe quel élément avec la class button.
Exemple :

<button class="button">Imprimer</button>

Si tu souhaites garder ton HTML tel quel, il faudrait que ton sélecteur CSS ressemble à ça :

input {}
/* OU */
input[type="button"] {}
segfault

Hello,

Comme l'a dis @Curvata, ta classe bouton n'est appliquée nulle part dans ton formulaire.

En gros voilà une petite liste de sélecteurs CSS avec la correspondance en HTML:

// <div ...
div {...}

// <div class="button" ...
.button {...}

// <div id="button" ...
#button {...}

// <div type="button" ...
div[type="button"] {...}

Généralement, les 3 premiers sont le plus souvent utilisés. Il y a d'autres selecteurs qui te permettent de faire des choses encore plus avancés (CSS Selectors)

AlexandrePP
Auteur

Ok ! Je n'avais pas saisi une différence entre <button> et <input type="button">

Maintenant que j'ai remplacé mon selecteur le "type" est devenu rouge, il semblerait que à nouveau qq chose joue pas.

AlexandrePP
Auteur

Merci pour ces réponses, je vais commencer une formation comme proposé.