Sujet Précédent Sujet Suivant

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

Réponse 1 / 8
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
1 juil. 2021 à 22:57
Et la question est ???
0
Réponse 2 / 8
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
Réponse 3 / 8
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
Réponse 4 / 8
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
Réponse 5 / 8
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
Réponse 6 / 8
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
Réponse 7 / 8
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
Réponse 8 / 8
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

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses