mettre border à un bouton en CSS

Question

Bonjour, 

mettre border à un bouton   en CSS
merci
Configuration: Windows / Edge 91.0.864.59

telliak · Answer

Et la question est ???

rocdan13 · Answer

Bonjour telliak merci  de  m'avoir  répondu.
Je débute et j'avoue être un  peux perdu.
voilà ou  j'ensuite ,maintenant  je  voudrais  mettre le border a 5px : comment  faire?          <input type="button" value="6" style="background-color:#40A497; width: 40px; height: 40px;border-color: yellow; " onClick="document.calculette.ans.value+='6'">
bonne journée

Utilisateur anonyme · Answer

Bonjour,
Voir ici : https://developer.mozilla.org/fr/docs/Web/CSS/border-width

Pour vous ce sera border-width 5px avec une seule valeur à appliquer sur tous les côtés.

Voir aussi :
- border-width avec 4 paramètres, un pour chaque côté : haut droit bas gauche.
- la propriété raccourcie border  qui permet de passer plusieurs propriétés en une fois : https://developer.mozilla.org/fr/docs/Web/CSS/border
-

rocdan13 · Answer

merci RoMa_31  c'est vraiment sympa : le pb  maintenant est de faire  plus  grand  la value "6" , sans trop  nuire au  code en  plus.
bonne  journée

Utilisateur anonyme · Answer

De rien !
Il faut utiliser la propriété font-size : https://developer.mozilla.org/fr/docs/Web/CSS/font-size
Comme la taille de la touche est figée à 40 px, une valeur font-size:30px devrait donner un bon rendu.

Merci et bonne journée, également

rocdan13 · Answer

Super!!! RoMa_31:    ça fonctionne ! tu  me fais faire  du  progrès  en    peux  de temps: merci beaucoup !.
Maintenant , ma  ligne de programmation  fait  1  mètre  long :  n'aurait  't'il pas un  moyen  de raccourcir ca stp.
Es - tu  intéresser par le Visual Basic  6 ? je peux  t'envoyer une  copie en  Français

<input type="button" value="6" style="background-color:#40A497; width: 40px; height: 40px;font-size:30px;border-color: yellow;border: thick double #32a1ce; " onClick="document.calculette.ans.value+='6'">

Utilisateur anonyme · Answer

Hé bien maintenant, il n'y a plus qu'à utiliser le CSS pour séparer le html et sa mise en forme :
- https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/Getting_started
- https://www.w3schools.com/Css/

Tu peux donc mettre les styles dans l'entête du fichier html voire dans des fichiers de styles séparés.

Dans le premier cas, ça peut donner quelque chose comme ci-dessous (border-color: yellow est enlevé puisqu'il est remplacé par border: thick double #32a1ce;
L'ajout de line-height:30px; permet de centrer un peu mieux le "6" verticalement; ) :
J'utilise la classe "bouton" qu'on pourra appliquer à tous les boutons de même apparence :

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<style>
			.touche {background-color:#40A497; width: 40px; height: 40px; line-height:30px; font-size:30px; border: thick double #32a1ce;}
		</style>	
	</head>
	<body>
		<input class="touche" type="button" value="6" onClick="document.calculette.ans.value+='6'">
	</body>
</html>

Merci pour ta proposition de VB6 mais je dois en avoir un qui traine quelque part et je ne m'en sers plus depuis un moment.

Bonne continuation.

rocdan13 · Answer

Merci encore une fois :c'est pensionnant ! RoMa_31 je voudrais t'envoyer là ou j'en suis mais je ne sais pas si c'est possible j'ai trouvé cette calculette au format html et je l'ai transformé en css :si tu veux en html l je te l'envoie pour les autres bonne journée

Mettre border à un bouton en CSS

8 réponses

Discussions similaires

Newsletters