Implémentation du bouton à bulle dynamique html5 et css3

Nous créons un ensemble utile de boutons animés avec la puissance de plusieurs arrière-plans et animations en CSS3, sans utiliser JavaScript, avec ce pack de boutons, vous pouvez facilement transformer n'importe quoi sur votre page Web en bouton animé. Le lien spécifie simplement une classe nom, les amis qui en ont besoin peuvent s'y référer

Cette fois, nous créons un paramètre utile pour animer les boutons avec la puissance de plusieurs arrière-plans et animations de CSS3. Avec ce pack de boutons, vous pouvez facilement transformer n'importe quel lien de votre page Web en un bouton animé en spécifiant simplement un nom de classe. Aucun JavaScript n'est nécessaire. Quatre thèmes de couleurs et trois tailles sont également disponibles en attribuant des noms de classe supplémentaires.
Pour transformer un lien normal sur une page Web en un bouton CSS3 animé sophistiqué, il vous suffit de spécifier la classe du bouton et l'une des couleurs prises en charge. Voir quelques exemples ci-dessous :

<a href="#" class="button blue big">Download</a> 
<a href="#" class="button blue medium">Submit</a> 
<a href="#" class="button small blue rounded">Submit</a>

Il existe quatre classes de couleurs : bleu, vert, orange et gris. Les autres cours que vous voyez attribués au lien ci-dessus sont facultatifs. Vous pouvez choisir parmi des tailles petites, moyennes et grandes, ainsi qu'une catégorie – Arrondi, qui crée une version plus arrondie du bouton.
Démonstration de l'effet
Il est recommandé d'utiliser des navigateurs standards tels que Chrome et Firefox pour visualiser l'effet. Même IE 9 présente certaines incompatibilités.

Le code CSS de tous les boutons animés réside dans boutons.css. Cela facilite l’accès à un projet existant et son utilisation.
Veuillez noter que tout au long du code ci-dessous, j'ai défini deux versions de la même propriété à certains endroits. Cela est lié à la manière dont les navigateurs gèrent les définitions CSS. Ils analysent les règles une par une et les appliquent, ignorant ce qu'ils ne comprennent pas. De cette façon, nous pouvons comprendre toutes les règles, qui sont la version vanille et une version compatible CSS3 qui ignorera les anciennes.
La première chose que nous devons faire est de définir la classe du bouton. C'est l'épine dorsale du bouton car il applique le positionnement, les polices et les styles d'arrière-plan.
Le premier est le style lié à la police, après quoi les propriétés sont affichées comme suit. Il est configuré comme un bloc en ligne, ce qui lui permet de s'asseoir sur la même ligne que le texte qui l'entoure (comme un élément en ligne), mais aussi comme un bloc d'aspect avec un remplissage et des marges.
À un moment donné, vous verrez que quatre images d'arrière-plan sont appliquées à chaque bouton. Même si cela semble effrayant, un seul fichier est réellement demandé au serveur. Les deux premiers arrière-plans, les images de bulles partielles en bas à gauche et en haut à droite, que vous pouvez voir dans l'illustration ci-dessous, et les deux autres sont de purs dégradés CSS.
Comme je l'ai mentionné ci-dessus, l'arrière-plan de la bulle est affiché sous forme de deux images distinctes, décalées par la propriété background position. À l’aide de la propriété de transition CSS3, nous avons défini des animations qui auraient les deux versions de l’image d’arrière-plan en haut ou en bas de la diapositive, créant ainsi un effet de bulle lorsque vous voyez le bouton survolé.

/* BlueButton */ 
.blue.button{ 
color:#0f4b6d !important; 
border:1px solid #84acc3 !important; 
/* A fallback background color */ 
background-color: #48b5f2; 
/* Specifying a version with gradients according to */ 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), 
-moz-linear-gradient(#4fbbf7, #3faeeb); 
background-image: url('button_bg.png'), url('button_bg.png'), 
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, 
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); 
} 
.blue.button:hover{ 
background-color:#63c7fe; 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), 
-moz-linear-gradient(#63c7fe, #58bef7); 
background-image: url('button_bg.png'), url('button_bg.png'), 
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, 
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); 
}

Chaque classe de couleur définit un ensemble unique de propriétés uniques : la couleur de l'étiquette de texte du bouton, l'ombre du texte et l'image d'arrière-plan. Notez que nous avons utilisé le bouton de propriété Background pour ajouter plusieurs images. Ils constituent le sommet de la hiérarchie, apparaissant en premier et étant défini ci-dessus.
Seuls les navigateurs Mozilla et Webkit prennent actuellement en charge les dégradés CSS, mais avec une syntaxe complètement différente. Les autres navigateurs afficheront la couleur d’arrière-plan de secours. Vous avez peut-être remarqué que nous n'avons pas inclus de préfixe pour la version gratuite des règles de dégradé. Cela est dû au fait que les dégradés ne font pas encore officiellement partie d’une spécification CSS et qu’il n’existe pas de protocole de syntaxe préféré.
Dans l'extrait ci-dessus, vous pouvez voir que nous avons défini un dégradé linéaire et un radial au-dessus. Pour rendre le dégradé plus fluide avec la syntaxe WebKit et Mozilla, nous définissons l'une des radiales RGBA, ce qui rend la couleur extérieure du dégradé complètement transparente.
Avec cela, notre bouton bulle animée CSS3 est terminé !
Résumé
Ces boutons sont entièrement basés sur CSS et l'intégration est très simple – déposez simplement le dossier des boutons quelque part dans votre projet. En modifiant les fichiers CSS, vous pouvez créer vos propres couleurs et formes.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Code de fonction H5 pour implémenter le téléchargement d'images locales et leur prévisualisation

Comment configurer CSS Couleur de la police du texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!