Mettre border à un bouton en CSS

Fermé
rocdan13 Messages postés 33 Date d'inscription samedi 22 février 2014 Statut Membre Dernière intervention 22 août 2021 - 30 juin 2021 à 08:59
rocdan13 Messages postés 33 Date d'inscription samedi 22 février 2014 Statut Membre Dernière intervention 22 août 2021 - 11 juil. 2021 à 10:07
Bonjour,

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

8 réponses

telliak Messages postés 3646 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 24 novembre 2022 872
1 juil. 2021 à 22:57
Et la question est ???
0
rocdan13 Messages postés 33 Date d'inscription samedi 22 février 2014 Statut Membre Dernière intervention 22 août 2021
2 juil. 2021 à 06:05
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
0
Utilisateur anonyme
2 juil. 2021 à 06:20
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
-
0
rocdan13 Messages postés 33 Date d'inscription samedi 22 février 2014 Statut Membre Dernière intervention 22 août 2021
3 juil. 2021 à 01:31
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Utilisateur anonyme
3 juil. 2021 à 17:45
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
0
rocdan13 Messages postés 33 Date d'inscription samedi 22 février 2014 Statut Membre Dernière intervention 22 août 2021
5 juil. 2021 à 01:26
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'">
0
Utilisateur anonyme
5 juil. 2021 à 07:59
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.
0
rocdan13 Messages postés 33 Date d'inscription samedi 22 février 2014 Statut Membre Dernière intervention 22 août 2021
11 juil. 2021 à 10:07
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
0