Boutons CSS - Guide rapide

Un bouton sur une page Web est le principal acteur sur lequel un utilisateur clique après avoir sélectionné ou saisi les entrées requises et soumet les détails pour obtenir les informations requises. Ce tutoriel se concentre sur dix bibliothèques CSS principales pour rendre les boutons géniaux, à savoir -

  • bttn.css- La bibliothèque bttn.css fournit une énorme collection de styles simples pour les boutons. Cette bibliothèque est entièrement gratuite pour un usage personnel et commercial. Ces boutons peuvent être personnalisés facilement.

  • Pushy Buttons - La bibliothèque Pushy Buttons est une petite bibliothèque CSS Pressable Buttons.

  • btns.css - La bibliothèque de boutons btns.css est un ensemble de boutons CSS qui utilisent des transitions fluides.

  • Social Buttons - La bibliothèque de boutons sociaux est un ensemble de boutons CSS créés en CSS pur et basés sur Bootstrap et Font Awesome.

  • Beautons- La bibliothèque de boutons Beautons est une boîte à outils CSS simple pour créer des boutons. Il permet d'appliquer une combinaison de styles, de tailles pour créer un énorme ensemble de boutons cohérents, robustes et solides.

La bibliothèque bttn.css fournit une énorme collection de styles simples pour les boutons. Cette bibliothèque est entièrement gratuite pour un usage personnel et commercial. Ces boutons peuvent être personnalisés facilement.

Chargement du bttn.css

Pour charger la bibliothèque btns.css, accédez au lien btns.css et collez la ligne suivante dans la section <head> de la page Web.

<head>
   <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>

Utilisation du bouton

Créez un bouton à l'aide de la balise de bouton html et ajoutez des styles bttn-slant, bttn-royal avec le spécificateur de taille bttn-lg.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-slant">Submit</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'un bouton en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons modifié quatre tailles.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg">Large</button>
      <button class = "bttn-pill bttn-md">Medium</button>
      <button class = "bttn-pill bttn-sm">Small</button>
      <button class = "bttn-pill bttn-xs">Extra Small</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la couleur

Tout comme la taille, vous pouvez définir la couleur du bouton en utilisant CSS. L'exemple suivant montre comment changer la couleur du bouton.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
   </head>
   
   <body>
      <button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
      <button class = "bttn-pill bttn-md bttn-warning">Warning</button>
      <button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
      <button class = "bttn-pill bttn-xs bttn-success">Success</button>
      <button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
   </body>
</html>

Il produira la sortie suivante -

Voici les différents styles disponibles dans bttn.css

Sr. No. Style Taille moyenne Couleur primaire Démo
1 bttn-oblique bttn-md bttn-primaire
2 bttn-unite bttn-md bttn-primaire
3 bttn-pilule bttn-md bttn-primaire
4 bttn-float bttn-md bttn-primaire
5 bttn-matériel-plat bttn-md bttn-primaire
6 cercle-matériau-bttn bttn-md bttn-primaire
sept bttn-fill-circle bttn-md bttn-primaire
8 bttn-gradient bttn-md bttn-primaire
9 bttn-gelée bttn-md bttn-primaire
dix bttn-stretch bttn-md bttn-primaire
11 bttn-minimal bttn-md bttn-primaire
12 bordé de bttn bttn-md bttn-primaire
13 bttn-simple bttn-md bttn-primaire

La bibliothèque Pushy Buttons est une petite bibliothèque CSS Pressable Buttons.

Chargement du bttn.css

Pour charger la bibliothèque pushy-buttons.min.css, téléchargez le css depuis github et collez la ligne suivante dans la section <head> de la page Web.

<head>
   <link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>

Utilisation du bouton

Créez un bouton à l'aide de la balise de bouton html et ajoutez des styles btn, btn-blue avec le spécificateur de taille btn-lg.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--blue">Submit</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'un bouton en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons modifié quatre tailles.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--blue">Large</button>
      <button class = "btn btn--df btn--blue">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
      <button class = "btn btn--sm btn--blue">Small</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la couleur

Tout comme la taille, vous pouvez définir la couleur du bouton en utilisant CSS. L'exemple suivant montre comment changer la couleur du bouton.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
   </head>
   
   <body>
      <button class = "btn btn--lg btn--red">Large</button>
      <button class = "btn btn--df btn--green">Normal</button>
      <button class = "btn btn--md btn--blue">Medium</button>
   </body>
</html>

Il produira la sortie suivante -

La bibliothèque de boutons btns.css est un ensemble de boutons CSS qui utilisent des transitions fluides.

Chargement du bttn.css

Pour charger la bibliothèque btns.css, accédez au lien btns.css et collez la ligne suivante dans la section <head> de la page Web.

<head>
   <link rel = "stylesheet" href = "btns.css">
</head>

Utilisation du bouton

Créez un bouton à l'aide de la balise de bouton html et ajoutez des styles btn, btn-blue avec le spécificateur de taille btn-lg.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-blue">Submit</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'un bouton en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons modifié quatre tailles.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Large</button>   
      <button class = "btn btn-sm btn-blue">Small</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la couleur

Tout comme la taille, vous pouvez définir la couleur du bouton en utilisant CSS. L'exemple suivant montre comment changer la couleur du bouton.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-red">Red</button>   
      <button class = "btn btn-lg btn-blue">Blue</button>
      <button class = "btn btn-lg btn-green">Green</button>
      <button class = "btn btn-lg btn-sea">Sea</button>   
      <button class = "btn btn-lg btn-yellow">Yellow</button>
      <button class = "btn btn-lg btn-orange">Orange</button>  
      <button class = "btn btn-lg btn-purple">Purple</button>   
      <button class = "btn btn-lg btn-black">Black</button>
      <button class = "btn btn-lg btn-cloud">Cloud</button>
      <button class = "btn btn-lg btn-grey">Grey</button>
   </body>
</html>

Il produira la sortie suivante -

Définition du style

Tout comme la taille, la couleur, vous pouvez définir le style du bouton en utilisant CSS. L'exemple suivant montre comment modifier le style du bouton.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/btns.css">
   </head>
   
   <body>
      <button class = "btn btn-lg btn-blue">Regular</button>   
      <button class = "btn btn-lg btn-blue btn-round">Round</button>
      <button class = "btn btn-lg btn-blue btn-raised">Raised</button>
      <button class = "btn btn-blue btn-sm">Small</button>   
      <button class = "btn btn-lg btn-outline-blue ">Outlined</button>
   </body>
</html>

Il produira la sortie suivante -

La bibliothèque de boutons sociaux est un ensemble de boutons CSS créés en CSS pur et basés sur Bootstrap et Font Awesome.

Chargement des boutons sociaux

Pour charger la bibliothèque bootstrap-social.css, téléchargez le bootstrap-social.css à partir de github et collez la ligne suivante dans la section <head> de la page Web.

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

Utilisation du bouton

Créez un bouton à l'aide de la balise d'ancrage html et ajoutez des styles btn, btn-block avec le spécificateur social btn-social.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

Il produira la sortie suivante -

Connectez-vous avec Twitter

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'un bouton en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons modifié quatre tailles.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

Il produira la sortie suivante -

Connectez-vous avec Twitter Connectez-vous avec Twitter Connectez-vous avec Twitter Connectez-vous avec Twitter

Utilisation des icônes uniquement

L'exemple suivant montre comment choisir des boutons d'icône uniquement.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

Il produira la sortie suivante -

Voici les différents styles disponibles dans les boutons sociaux.

N ° Sr. Style Taille moyenne Bouton Bouton icône
1 btn-twitter btn-md Connectez-vous avec Twitter
2 btn-bitbucket btn-md Connectez-vous avec Bitbucket
3 btn-dropbox btn-md Connectez-vous avec Dropbox
4 btn-facebook btn-md Se connecter avec Facebook
5 btn-btn-flickr btn-md Connectez-vous avec Flickr
6 btn-btn-foursquare btn-md Connectez-vous avec Foursquare
sept btn-btn-github btn-md Connectez-vous avec Github
8 btn-btn-google btn-md Connectez-vous avec Google
9 btn-btn-instagram btn-md Connectez-vous avec Instagram
dix btn-btn-linkedin btn-md Se connecter avec LinkedIn
11 btn-btn-microsoft btn-md Connectez-vous avec Microsoft
12 btn-btn-odnoklassniki btn-md Connectez-vous avec Odnoklassniki
13 btn-btn-openid btn-md Connectez-vous avec Openid
14 btn-btn-pinterest btn-md Connectez-vous avec Pinterest
15 btn-btn-reddit btn-md Connectez-vous avec Reddit
16 btn-btn-soundcloud btn-md Connectez-vous avec Soundcloud
17 btn-btn-tumblr btn-md Connectez-vous avec Tumblr
18 btn-btn-twitter btn-md Connectez-vous avec Twitter
19 btn-btn-vimeo btn-md Connectez-vous avec Vimeo
20 btn-btn-vk btn-md Connectez-vous avec Vk
21 btn-btn-yahoo btn-md Connectez-vous avec Yahoo

La bibliothèque de boutons Beautons est une boîte à outils CSS simple pour créer des boutons. Il permet d'appliquer une combinaison de styles, de tailles pour créer un énorme ensemble de boutons cohérents, robustes et solides.

Chargement des Beautons

Pour charger la bibliothèque Beautons, téléchargez le css depuis github et collez la ligne suivante dans la section <head> de la page Web.

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

Utilisation du bouton

Créez un bouton en utilisant la balise de bouton html et ajoutez des styles btn.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<Submit</button>
   </body>
</html>

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'un bouton en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons modifié quatre tailles.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

Il produira la sortie suivante -









Définition de la taille de la police

Vous pouvez augmenter ou diminuer la taille d'un bouton en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons modifié quatre tailles.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

Il produira la sortie suivante -







Définition des boutons fonctionnels

L'exemple suivant montre divers boutons fonctionnels.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

Il produira la sortie suivante -











Combiner les styles

L'exemple suivant montre comment combiner les styles des boutons.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

Il produira la sortie suivante -







UNE dans un paragraphe.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2025 | All Rights Reserved