Comment créer un beau bouton HTML. Styles et effets faciles pour les boutons

J'ai sélectionné quelques boutons CSS qui, je pense, peuvent être utilisés dans des projets Web.

Générateur de boutons CSS3

Regardez le générateur Boutons CSS3 de Sanwebe:

Bouton CSS3 rose avec police Pacifico

Joli bouton rose ( à part un petit code jQuery pour jouer de la musique et changer le texte interne) est entièrement créé sur la base de CSS3 :

Collection de boutons 3D

Collection de boutons 3D créés avec CSS3 :

Boutons sociaux 3D

Superbes boutons sociaux créés avec CSS3 et police d'icônes :

Boutons CSS3 animés

Boutons CSS animés avec motifs d'arrière-plan. Peut ne pas fonctionner dans les navigateurs Firefox 3.6 et IE10 :

Boutons CSS3 animés ronds

Voici quelques boutons animés supplémentaires où la rotation du texte au survol de la souris donne un effet vraiment sympa :

Nettoyer les boutons du cercle

Voici un autre exemple de boutons ronds CSS3 :

Boutons bascule en CSS3

Boutons radio bien exécutés créés avec CSS3 et une police d'icônes :

Bouton CSS3 animé

Joli bouton 3D créé avec les polices CSS3 et Google :

Effets des boutons CSS3

Ces boutons démontrent des animations utilisant diverses propriétés CSS3 :

Boutons CSS3 brillants

Vous pouvez désormais être absolument sûr que des boutons brillants peuvent être facilement créés en utilisant CSS3, plus Photoshop :

Boutons CSS3 3D

C'est incroyable ce que vous pouvez faire avec les pseudo-éléments CSS3 :before et :after. Découvrez les incroyables boutons 3D :

Commutateur CSS3

Exemple de bouton bascule en CSS3 sans utiliser JavaScript :

Effet de bouton rabattable 3D

Effet de retournement 3D lors d'un clic sur un bouton créé avec CSS3 :

Boutons de marque

De superbes boutons CSS de marques populaires utilisant des icônes bootstrap :

Bouton rond foncé

Bouton rond utilisant jQuery pour donner un effet de goutte lorsque l'on clique sur le bouton :

Commutateur CSS3

Switch créé avec CSS3 :

Beaux boutons plats

Une collection de boutons CSS plats pour toutes les occasions, sans animation ni effets :

Boutons de partage social

Une version plus attractive des boutons de partage, mais sans fonctionnalité. Selon le développeur, ils devraient fonctionner dans IE7+ :

Bouton de Noël

Un bouton de Noël CSS utilisant data:urls, une méthode pour intégrer une image directement dans un document :

Bouton souple

Bouton rond brillant créé avec CSS3 :

Bouton souple

Les boutons utilisent uniquement des caractères Unicode, permettant l'utilisation de polices de texte ou d'icônes :

Grands boutons CSS3 animés en 3D

Un autre ensemble de boutons CSS animés en 3D pour les sites Web. L'animation est réalisée à l'aide des propriétés d'animation et d'images clés :

Boutons CSS3 en métal

Une collection de boutons CSS3 métalliques dont les symboles ont été créés à l'aide de la police pictos en utilisant @font-face . Pour l’effet métallique, les propriétés box-shadow et Linear-gradient ont été utilisées :

Boutons CSS3 ronds

Une autre collection de boutons ronds animés en CSS3 :

Boutons de réseaux sociaux cliquables CSS3

Les boutons utilisent des propriétés CSS3 simples telles que les dégradés, les ombres de boîte, les ombres de texte, etc. Les états « inactif » et « actif » sont également inclus dans cet ensemble :

Boutons CSS3 simples

Beaux boutons CSS :

Bouton de téléchargement 3D

Ce bouton 3D utilise une transformation de perspective. Cela ne fonctionne que dans les navigateurs basés sur Webkit :

Incroyables boutons de médias sociaux CSS3

Gros bouton

Bouton CSS3 solide et brillant avec un effet d'ombre en bas. Le bouton utilise une police appelée Sansita One de la collection Google :

Boutons simples

Quelques boutons CSS simples :

Boutons de réseaux sociaux CSS3

Boutons CSS simples

Un ensemble de boutons CSS simples. Ils sont faciles à installer et à utiliser. Ils peuvent être facilement intégrés à Font-Awesome ou à une autre bibliothèque :

Boutons en forme de jeton de poker

Un exemple de bouton simple en forme de jeton de poker. Il peut également être utilisé comme bouton avec un effet de survol :

Bouton curseur

Concept Boutons du curseur CSS:

Boutons du menu d'administration

Panneau d'administration ( menu ou navigation) en utilisant CSS3 et le framework fontawesome. Lors du passage à un bouton, la classe active est ajoutée à l'aide de jQuery :

Bouton cousu

Un simple bouton avec une ligne qui démontre la puissance de CSS3 sans utiliser d'image d'arrière-plan :

Bouton rotatif

Bouton rond avec bordure rotative pour indiquer le survol de la souris :

Bouton en CSS3

Bouton contextuel créé avec CSS3 sur la base de cet exemple :

Bouton CSS3 avec carte coulissante

Ces boutons CSS ressemblent à des cartes sortant d’une pochette. Ils peuvent être utilisés pour afficher des informations qui doivent être masquées jusqu'à ce que l'utilisateur fasse un choix :

Animation de boutons CSS3 sous forme de bonbon

Bouton avec animation pour afficher l'état de chargement :

Commutateurs CSS3

De superbes boutons radio qui utilisent jQuery pour basculer entre une classe :

Boutons brillants

Ensemble de beaux boutons pour le site Web CSS. Différentes propriétés sont utilisées pour donner un aspect brillant tridimensionnel :

Avant d’examiner les boutons, examinons les paramètres communs à tous.

HTML

Les boutons utiliseront du code HTML très simple :

S'abonner

CSS

De plus, tous les boutons auront des paramètres communs pour le texte de la légende et les liens de désélection :

ButtonText ( police : 18px/1.5 Helvetica, Arial, sans-serif ; couleur : #fff ; ) a ( couleur : #fff ; décoration de texte : aucune ; )

En règle générale, l'utilisateur s'attend à un effet assez doux lorsqu'il passe la souris sur un lien ou un bouton. Et dans notre cas, le bouton change de taille - il augmente, affichant un message supplémentaire.

Code CSS de base

Pour commencer, il suffit de donner une forme et une couleur au bouton. Définissez une hauteur de 28 px et une largeur de 115 px, ajoutez des marges et un remplissage, et donnez également au bouton une bordure claire.

#button1 ( arrière-plan : #6292c2 ; bordure : 2px solide #eee ; hauteur : 28px ; largeur : 115px ; marge : 50px 0 0 50px ; remplissage : 0 0 0 7px ; débordement : caché ; affichage : bloc ; )

Effets CSS3

Certaines personnes aiment qu'un simple bouton soit accompagné de beaucoup de code CSS. Cette section fournit des styles CSS3 supplémentaires pour notre bouton. Vous pouvez vous en passer, mais ils donnent au bouton un look plus moderne.

Arrondissez les coins du cadre et ajoutez un dégradé. Cela utilise une petite astuce avec un dégradé sombre qui interagit avec n'importe quelle couleur d'arrière-plan.

/*Coins arrondis*/ -webkit-border-radius : 15px ;

-moz-border-radius : 15px ;

rayon de bordure : 15 px ;

/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Il ne reste plus qu'à ajouter un style pour développer le bouton lorsque vous passez la souris dessus. Le bouton doit avoir une largeur de 230 px pour afficher l’intégralité du message.

#bouton1 : survol (largeur : 230 px ; )

Changement simple de tonalité de couleur

Un effet CSS très simple et populaire pour un bouton. Lorsque vous survolez le curseur de la souris, le ton de la couleur d'arrière-plan change progressivement.

Code CSS de base

Le code CSS est très similaire à l'exemple précédent. Une couleur de fond différente est utilisée et la forme est légèrement modifiée. Il centre également le texte et définit la hauteur de ligne du bouton afin que le centrage vertical se produise.

#button2 (arrière-plan : #d11717 ; bordure : 2px solide #eee ; hauteur : 38px ; largeur : 125px ; marge : 50px 0 0 50px ; débordement : caché ; affichage : bloc ; alignement du texte : centre ; hauteur de ligne : 38px ; )

Effets CSS3

Définissez l'arrondi des coins, un dégradé pour l'arrière-plan et une ombre supplémentaire. En utilisant rgba, nous rendons l'ombre noire et transparente.

/*Coins arrondis*/ -webkit-border-radius : 10px ;

-moz-border-radius : 15px ;

-moz-border-radius : 10px ;

rayon de bordure : 10 px ;

/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

image d'arrière-plan : -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

image d'arrière-plan : -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Code CSS de base

image d'arrière-plan : -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

#button3 ( arrière-plan : #d11717 url("bkg-1.jpg"); position d'arrière-plan : 0 0 ; ombre du texte : 0px 2px 0px rgba(0, 0, 0, 0.3); taille de police : 22 px ; hauteur : 58px ; largeur : 155px ; marge : 0 0 50px ; affichage : bloc ; hauteur de ligne : 58px ;

Effets CSS3

Il n'y a rien de spécial dans cet exemple : coins arrondis et ombres.

/*Coins arrondis*/ -webkit-border-radius : 5px ;

-moz-border-radius : 15px ;

-moz-border-radius : 5px ;

rayon de bordure : 5 px ;

/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Ombre*/ -webkit-box-shadow : 0px 3px 1px rgba(0, 0, 0, 0.2);

-moz-box-shadow : 0px 3px 1px rgba(0, 0, 0, 0.2);

box-shadow : 0px 3px 1px rgba(0, 0, 0, 0.2);

L'animation de ce cas dure plus longtemps pour créer un effet fluide et intéressant.

Code CSS de base

/*Transition*/ -webkit-transition : Toutes les facilités de 0,8 s ;

-moz-transition : toutes les 0,8 secondes sont faciles ;

Effets CSS3

-o-transition : toutes les 0,8 s sont facilitées ;

-ms-transition : Toutes les facilités de 0,8 s ;

/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Dans ce cas, nous avons la plus grande section de survol. La longueur de l'ombre est réduite et les marges sont utilisées pour créer un mélange de la zone sombre. L’ensemble crée l’illusion d’appuyer sur un bouton. L’inversion du dégradé améliore l’effet.

#button4:hover ( margin-top : 52px ; /*Shadow*/ -webkit-box-shadow : 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow : 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow : 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image : -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); image d'arrière-plan : -moz-linear-gradient(bas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); image d'arrière-plan : -o-gradient-linéaire (bas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); bas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); image d'arrière-plan : dégradé linéaire (bas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4));

Vous devez d’abord télécharger les sources et sélectionner un thème de conception pour les boutons. Vous pouvez choisir le design que vous aimez. Par exemple, prenons le premier thème, winona.

Télécharger

Articles similaires sur ce sujet :

Ouvrez le fichier dans l'éditeur index.htmlà partir de la source, on trouve le tag qui nous intéresse. Dans mon cas :

A partir de ce code on prend une ligne avec la classe bouton.

Nous collons le code à n'importe quel endroit nécessaire du fichier avec le code de notre projet entre la balise .
Remplacez le nom du bouton par celui dont vous avez besoin. Dans mon cas, je changerai le nom en « Open »

Copiez-le et collez-le entre les balises dans le fichier d'index de votre projet.

L'exemple montre qu'un certain style est ajouté au bouton en utilisant une classe supplémentaire correspondant au nom du thème de conception.

Dans notre cas, c'est la classe bouton-winona. Par conséquent, les styles nommés winona seront ajoutés.

C'est très pratique, car... si vous souhaitez modifier le design des boutons, il vous suffira de remplacer le nom de la classe supplémentaire dans la balise . Et les styles sont déjà écrits dans le fichier bouton.css!

Vlad Merjevitch

Boutons standards créés via tag

ou , bien sûr, mais essayer de changer leur apparence à travers les styles conduit à un résultat terrible. Les boutons sont un clin d'œil aux interfaces d'il y a dix ans avec leur angulaire (Fig. 1). Bien entendu, une telle métamorphose ne se produit que lors de l'utilisation des propriétés background et border, en d'autres termes, vous ne pouvez pas modifier la couleur d'arrière-plan du bouton et la bordure qui l'entoure.

Riz. 1. Bouton original et modifié

Vous pouvez utiliser des images pour changer radicalement l’apparence d’un bouton, mais comparée aux capacités de CSS 3, cette option semble désormais native.

Je prendrai comme base le bouton d'origine du navigateur, qui contient un dégradé vertical linéaire et des bords arrondis.

Le moyen le plus simple d'arrondir les coins consiste à utiliser la propriété border-radius, en lui donnant le rayon d'arrondi souhaité. Comme d'habitude, cela ne fonctionne pas dans tous les navigateurs, vous devrez donc ajouter l'ensemble complet. Le résultat est le suivant.

Rayon de bordure Moz : 5 px ; /* Firefox */ -webkit-border-radius : 5px ; /* Safari 4 */ border-radius: 5px; /* Internet Explorer 9, Safari 5, Chrome */

L'apparence des boutons dans différents navigateurs est illustrée à la Fig. 2.

Riz. 2. Boutons aux coins arrondis

En général, tout est attendu. Les anciennes versions d'IE ne supportent pas CSS 3, les autres créent correctement les coins dont j'ai besoin. Pour une raison quelconque, Opera n'affiche pas l'arrière-plan par défaut, comme le font d'autres navigateurs, mais Opera sera discuté séparément.

Maintenant, la partie amusante consiste à créer un dégradé linéaire vertical. Pour ce faire, des styles individuels pour chaque navigateur seront à nouveau utilisés.

arrière-plan : -moz-linear-gradient(#00BBD6, #EBFFFF) ;

Un dégradé spécifie un point de départ, un angle de dégradé, une couleur de départ et une couleur de fin. Dans notre cas, lorsque le dégradé va verticalement de haut en bas, il suffit de définir uniquement les couleurs, le reste des paramètres est utilisé par défaut.

Chrome, Safari

arrière-plan : -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));

Ici, vous spécifiez le type de dégradé (linéaire), le point de départ de l'application du dégradé (coin supérieur gauche), le point final (coin inférieur gauche), ainsi que les couleurs de début et de fin.

Internet Explorer

filtre : progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");

Le navigateur IE suit sa propre voie et utilise la propriété filter pour divers effets, y compris le dégradé. Ici tout est plus trivial, seules les couleurs de début et de fin du dégradé sont écrites.

Opera est au repos ; les dégradés n'ont pas encore été implémentés.

Nous regroupons toutes les propriétés des navigateurs, des coins et des dégradés (exemple 1).

Exemple 1 : boutons de dégradé linéaire

Bouton Accueil

Nouveau bouton

Cela s'est avéré plutôt joli (Fig. 3), mais il existe également des différences évidentes par rapport au bouton d'origine : il a l'air plat, comme une planche.

Riz. 3. Vue des boutons avec dégradé

Vous pouvez à nouveau réaliser un bouton de la forme souhaitée en utilisant un dégradé, en « jouant » avec les couleurs. Deux valeurs de dégradé ne suffisent plus ; heureusement, Firefox et Safari proposent une solution.

arrière-plan : -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4) ;

Au lieu de deux valeurs, insérez le nombre de couleurs souhaité, le dégradé passera en douceur d'une couleur à l'autre.

Chrome, Safari

arrière-plan : -webkit-gradient(linéaire, 0 0, 0 100 %, de(#D0ECF4), à(#D0ECF4), color-stop(0.5, #5BC9E1));

Le paramètre color-stop spécifie le point auquel la nouvelle couleur sera appliquée. La valeur varie de 0 à 1.

Exemple 2 : Boutons avec dégradé amélioré

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

Bouton Accueil

Nouveau bouton

Le résultat de l'exemple est présenté sur la Fig. 4.

Riz. 4. Dégradé, quel type de dégradé est nécessaire

De même, vous pouvez créer n'importe quel autre dégradé sur un bouton ou un autre élément (Fig. 5). Mais faites-le vous-même, c'est pourquoi je l'ai ajouté à l'atelier.

Riz. 5. Des boutons si différents

Permettez-moi de résumer. Vous pouvez créer un bouton avec un dégradé et des coins arrondis sans images. Cependant, il existe une confusion et des hésitations avec les navigateurs. Opera ne peut pas du tout fonctionner avec des dégradés ; dans IE 9, il y a un bug désagréable lors de la combinaison d'un dégradé avec des coins (Fig. 6).

Riz. 6. Superposer l'arrière-plan sur les coins dans IE 9

Eh bien, pour l'instant, nous allons créer des « beautés » pour les navigateurs Firefox, Safari et Chrome.