Button X est un générateur de boutons en ligne qui vous permet de créer des styles de boutons CSS en quelques minutes. Introduit au milieu des années 1990, le langage CSS (Cascading Style Sheets) permet de mettre en forme votre page HTML (couleur du fond de la page, des polices, des liens, du type de police etc.). Le CSS permet de séparer la structure du document HTML et la présentation par des fichiers séparés. Le code HTML est plus simple car il ne contient aucune balise de formatage. La modification du style d'un élément, dans une feuille CSS, se répercute automatiquement à toutes les pages HTML qui y sont rattachées. Cette technologie implique donc une excellente productivité pour la maintenance d'un site web.
Ce générateur de boutons CSS est un outil en ligne qui vous permet de créer de magnifiques boutons CSS. Il suffit de sélectionner un bouton dans la bibliothèque et de personnaliser ses styles CSS. Une fois terminé, cliquez sur le bouton "Get code" pour afficher les codes CSS et HTML pour copier les codes dans le presse-papiers. Vous pouvez maintenant coller le style CSS dans votre fichier CSS.
Principales propriétés CSS :
- Couleurs de dégradé de fond (CSS3)
- Couleur, taille, style et poids de la police
- Couleur, taille et rayon de la bordure (CSS3)
- Box shadow (CSS3)
- Ombre du texte (CSS3)
Outre ces propriétés, vous pouvez également modifier le texte du bouton et le nom de la classe.
Le code généré fonctionnera sur la plupart des navigateurs tels que; Google Chrome, Firefox, Safari, Opera, Edge. Il est possible d'intégrer les classes CSS dans des pages utilisant Bootstrap.
Comment créer un bouton ?
1) Conception du bouton
- Sélectionner un bouton dans la bibliothèque ;
- Saisr le texte de son bouton en haut de la page ;
- Régler tous les paramètres à droite avec les curseurs (à la souris) :
-
Font Size, Border Radius, Border Size, Vertical Size, Horizontal Size, Box Shadow, Vertical Position, Horizontal Position etc
-
- Sélectionner sous le bouton les couleurs via les mélangeurs, fond, texte, bordure etc
- Cliquez sur le bouton "Get code" pour générer le code CSS3
2) intégration à la page web
- Coller le code CSS généré plus haut dans la page CSS de votre site ;
- Dans votre page web Insérer le lien vers votre fichier CSS dans la balise head de votre page du type : <link href="/css/test-css3.css" rel="stylesheet" type="text/css" /> ;
- Insérer le lien du bouton à l'endroit voulu dans votre page web <a href="#" class="myButton">Tice Education</a>
- Tester dans votre navigateur
Une application sympatique, simple qui permet de concevoir des boutons avec des effets CSS3 sans partiquement aucune connaissance. A tester...
Plus d'informations ici : https://www.bestcssbuttongenerator.com/
