Aujourd'hui, nous allons nous amuser en jetant un coup d'œil au nouvel outil gratuit pour développeurs Web, simplement appelé CSS Button. Cette application Web permet de créer rapidement et facilement les boutons CSS de vos rêves à l'aide de commandes simples et intuitives.
J'ai déjà vu pas mal de fabricants de boutons CSS auparavant et presque aucun ne méritait une utilisation répétée, mais ce site a beaucoup à offrir et peut réellement vous faire économiser beaucoup de temps et de frustration. Let's sauter dedans et vérifier!
Bouton de rencontre CSS
L'application CSS Button est idéale pour démarrer vos boutons. Pour commencer, il y a quelques choses sur la page d'accueil que vous ne voulez pas manquer. Les commandes de base sont assez évidentes: vous pouvez créer un nouveau bouton à partir de zéro, vérifier et modifier un modèle ou vous connecter à Twitter pour pouvoir enregistrer votre travail.
Aussi, ne manquez pas le bouton caché? Random Button? fonctionnalité dans le pied de page. Il n'y a pas trop de contenu sur le site pour le moment (l'application est toujours en version bêta), mais à mesure qu'elle gagne et gagne de plus en plus d'utilisateurs, cette fonctionnalité deviendra un moyen amusant de découvrir de nouvelles idées de boutons.
Créer un bouton à partir de zéro
Je ne suis jamais du genre à opter pour la solution de facilité, alors commençons par construire notre propre bouton complètement à partir de zéro. Pour ce faire, cliquez simplement sur le lien à gauche:
Cela devrait vous amener à un nouvel écran où vous aurez toutes les commandes dont vous avez besoin pour créer un bouton super chic. Toutes les entrées sont basiques et utilisent soit des formulaires simples, soit des contrôles intuitifs WYSISYG.
Nous allons passer en revue chaque étape pour vous montrer comment fonctionne le processus. Gardez à l'esprit que cela peut sembler assez impliqué dans une mise en page écrite, mais une fois que vous l'essayez vous-même, l'effort est vraiment minimal.
Dégradé de fond
La première étape consiste à définir un arrière-plan pour notre bouton. Vous pouvez soit choisir une couleur unie ou un dégradé, je prendrai le chemin du dégradé. Ceci utilise des sélecteurs de couleurs simples pour vous aider à construire votre dégradé. Si vous avez déjà codé les dégradés CSS à la main, vous savez que nous gagnons déjà beaucoup de temps, car choisir deux couleurs est beaucoup plus facile que d’écrire le fouillis de code nécessaire à cette opération.
En cliquant sur l'éclair à côté d'une option, vous obtenez sa liste de commandes. Pour beaucoup d'entre eux, vous pouvez cliquer plusieurs fois pour ajouter l'effet plusieurs fois. Cela aide à créer des calques très complexes, semblables à ceux de Photoshop.
Comprendre l'aperçu
A droite des contrôles de bouton se trouve l'aperçu de ce que vous créez. Cela ne semble pas beaucoup pour le moment, mais cela ira beaucoup mieux à mesure que nous progressons.
Notez qu’ils ont couvert toutes les bases ici et vous permettent d’appeler les états normal, stationnaire et actif. Par défaut, nos actions affecteront l'état normal, il suffit de cliquer sur l'un des autres états pour le cibler spécifiquement. Le final? version est un bouton actif que vous pouvez utiliser pour évaluer et interagir avec votre conception.
Boîte ombre
Ensuite, les contrôles Box-Shadow. Celles-ci sont assez simples et vous permettent de saisir rapidement des valeurs pour le décalage, le flou, l’étalement, etc. Vous choisissez ensuite votre couleur et pouvez même basculer l’option incrustée pour les ombres intérieures. Ma seule déception ici est qu'il ne semble pas que vous puissiez définir l'ombre à l'aide d'une valeur rbga, qui est ma méthode préférée pour que l'arrière-plan transparaisse.
Dimensions du bouton
Il est maintenant temps de donner de la substance à notre bouton. Dans cette section, vous pouvez définir une taille statique et ajouter des marges / un remplissage pour ajouter du poids à votre bouton. Vous pouvez également arrondir les coins avec un rayon de bordure. Chacune de ces options vous permet d'être aussi spécifique que vous le souhaitez. Par exemple, vous pouvez choisir de définir la marge de la bordure de manière à ce qu'elle soit identique sur tous les côtés ou différente pour chaque coin.
Après cette étape, nous pouvons voir que notre bouton ressemble beaucoup plus à un bouton!
Propriétés de la police
Nous avons ensuite quelques contrôles pour définir nos styles d'ombre de texte et de texte. J'apprécie vraiment de pouvoir définir non seulement la police, mais aussi la pile de polices. Cela montre que le développeur avait à l’esprit des codeurs lors de la construction de cet outil.
Après cette étape, notre bouton a l’air très vif. Nous avons défini à peu près tout ce dont nous avons besoin pour un bouton de base (vous pouvez également définir une transition si vous le souhaitez).
Survol et actif
Après avoir obtenu l’état normal de mon bouton exactement comme je le souhaite, il est temps de revenir en arrière et d’ajouter les paramètres de mon survol et de mon état actif. J'ai pris le chemin prévisible de rendre le bouton un peu plus léger en vol stationnaire et d'inverser le dégradé pour simuler une pression en mode actif.
Une fois que nous avons terminé, nous avons un gros morceau de CSS à placer dans notre code. C'est un gros morceau de code, mais c'est tout ce que je fais et résulte principalement de tous ces préfixes de navigateur loufoques que vous devez utiliser pour créer des dégradés et des ombres. Lorsque je regarde tout le code nécessaire à ce simple bouton, il devient évident combien de temps ce petit outil m'a permis de gagner du temps. Je suis plus que capable de créer ce bouton à la main, mais cela me prendrait certes plusieurs minutes. J'utilisais beaucoup plus rapidement les commandes WYSIWYG ici.
Partir d'un modèle
Maintenant que nous avons choisi la voie du bricolage, revenons au début et prenons l’autre option: partir d’un modèle. En cliquant sur ce lien, vous accédez à la page des modèles où vous pouvez actuellement choisir parmi cinq exemples de boutons très astucieux.
Modification du modèle
Pour commencer, j'ai choisi de partir du bouton de téléchargement? Sexy Green? modèle. En choisissant une option, vous entrez dans le même générateur que celui que nous avons vu auparavant. La seule différence est que les paramètres appropriés sont désormais pré-remplis pour créer le bouton ci-dessous.
C’est vraiment bien d’avoir déjà construit cette base solide. À partir de là, il s’agit simplement de personnaliser les valeurs que vous souhaitez modifier.Par exemple, en commençant par le bouton ci-dessus, je n’ai modifié que les propriétés border-radius et box-shadow, et j’ai pu décomposer rapidement mon propre bouton 3D factice.
Ça vaut le coup d'essayer?
Je sais ce que beaucoup d'entre vous pensent et je suis avec vous. Je suis un nerd total qui aime l'art et la science de CSS, donc je fait prendre plaisir coder ces types de choses à la main. Cela étant dit, je ne peux pas m'empêcher d'apprécier un utilitaire qui peut réellement me faire gagner du temps, et c'est l'un de ces outils. Au-delà de cela, je ne sais pas toujours ce que je veux dans un bouton quand je commence à le créer et c'est agréable d'avoir quelques outils visuels pour expérimenter et ajuster jusqu'à ce que je trouve quelque chose que j'aime.
Le bouton CSS étant toujours en version bêta, j'ai rencontré un bogue ou deux. Par exemple, lorsque vous saisissez une couleur à la main, puis que vous cliquez sur le sélecteur de couleur ultérieurement pour la modifier, vous constatez que le sélecteur de couleur ne se met pas à jour pour refléter la saisie manuelle.
Mis à part quelques bizarreries mineures, il s'agit d'un utilitaire solide que je prévois d'ajouter à ma boîte à outils CSS3, qui ne cesse de croître. Comme je l'ai mentionné ci-dessus, cette application présente de nombreux éléments qui montrent clairement qu'elle a été conçue pour les codeurs. J'ai une flexibilité impressionnante pour faire tout ce que je ferais normalement à la main, simplement dans un format un peu plus facile à suivre.
Qu'est-ce que tu penses? Aimez-vous les outils qui visent à vous aider à effectuer des tâches complexes un peu plus facilement ou préférez-vous la voie puriste consistant à coder à la main uniquement?