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
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
A voir également:
- Mettre border à un bouton en CSS
- Bouton reinitialisation pc - Guide
- Réinitialiser chromecast sans bouton - Guide
- Bouton marche arret i o - Forum Word
- Bouton on/off comment savoir ✓ - Forum Matériel & Système
- Comment debloquer un bouton enfoncé - Forum iPhone
8 réponses
telliak
Messages postés
3667
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
4 novembre 2024
876
1 juil. 2021 à 22:57
1 juil. 2021 à 22:57
Et la question est ???
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
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?
bonne journée
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
2 juil. 2021 à 06:20
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
-
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
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
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
bonne journée
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Utilisateur anonyme
3 juil. 2021 à 17:45
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
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
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
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
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
5 juil. 2021 à 07:59
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 :
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.
- 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
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
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
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
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