Mettre border à un bouton en CSS

Signaler
Messages postés
22
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
27 juillet 2021
-
Messages postés
22
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
27 juillet 2021
-
Bonjour,

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

8 réponses

Messages postés
3587
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
1 juillet 2021
843
Et la question est ???
Messages postés
22
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
27 juillet 2021

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
Messages postés
425
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 juillet 2021
82
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
-
Messages postés
22
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
27 juillet 2021

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
Messages postés
425
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 juillet 2021
82
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
Messages postés
22
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
27 juillet 2021

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'">
Messages postés
425
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 juillet 2021
82
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.
Messages postés
22
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
27 juillet 2021

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
<!doctype html>
<html lang="fr">

<head>
<meta charset="utf-8">
<style>
.touche1 {background-color:#09EFEF; width: 40px; height: 40px; line-height:30px; font-size:30px; border: thick double #32a1ce;}
.touche2 {background-color:#F39F0D; width: 40px; height: 40px; line-height:30px; font-size:30px; border: thick double #32a1ce;}
.touche3 {background-color:#21ED35; width: 40px; height: 40px; line-height:30px; font-size:30px; border: thick double #32a1ce;}
.touche4 {background-color:yellow; width: 60px; height: 60px; line-height:30px; font-size:30px; border: thick double #32a1ce;}
.touche5 {background-color:#21ED35; width: 200; height: 40px; line-height:30px; font-size:30px; border: thick double #32a1ce;}
.touche6 {background-color:yellow; width: 200; height: 40px; line-height:30px; font-size:30px; border: thick double #32a1ce;}
.touche7 {background-color:red; width: 60px; height: 60px; line-height:30px; font-size:30px; border: thick double #32a1ce;}
</style>
<body bgcolor= "#000000" text= "gold">
<form name="calculette" >
<br>
</head>
<body>
<input class="touche1" type="button" value="1" onClick="document.calculette.ans.value+='1'">
<input class="touche2" type="button" value="2" onClick="document.calculette.ans.value+='2'">
<input class="touche3" type="button" value="3" onClick="document.calculette.ans.value+='3'">
<input class="touche4" type="button" value="+" onClick="document.calculette.ans.value+='+'">
<input class="touche1" type="button" value="4" onClick="document.calculette.ans.value+='4'">
<input class="touche2" type="button" value="5" onClick="document.calculette.ans.value+='5'">
<input class="touche3" type="button" value="6" onClick="document.calculette.ans.value+='6'">
<input class="touche4" type="button" value="-" onClick="document.calculette.ans.value+='-'">
<input class="touche1" type="button" value="7" onClick="document.calculette.ans.value+='7'">
<input class="touche2" type="button" value="8" onClick="document.calculette.ans.value+='8'">
<input class="touche3" type="button" value="9" onClick="document.calculette.ans.value+='9'">
<input class="touche4" type="button" value="*" onClick="document.calculette.ans.value+='*'">
<input class="touche1" type="button" value="0" onClick="document.calculette.ans.value+='0'">
<input class="touche4" type="button" value="/" onClick="document.calculette.ans.value+='/'">
<input class="touche2" type="button" value="." onClick="document.calculette.ans.value+='.'">
<br>
<br>
...<input class="touche5" type="textfield" value=" "name="ans" onClick="document.calculette.ans.value+='.'">..
<input class="touche6" type="reset" value=" Réinitialiserstyle="name="" onClick="document.calculette.ans.value+='.'">
<input class="touche7" type="button" value="="onClick="document. calculette.ans.value=eval(document.calculette.ans.value)">


<hr>
</form
</body>
</html>

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