Comment utiliser CSS3 pour créer de beaux boutons interactifs

Dans la conception Web moderne, les boutons ont toujours été l'un des éléments indispensables. Qu'il s'agisse de saisie de formulaire, de menus de navigation ou d'interactions de page, les boutons sont la clé de l'action de l'utilisateur. Afin d'améliorer l'expérience utilisateur, nous devons prêter attention à la beauté et à l'interactivité des boutons dans la conception. La technologie CSS3 fournit de nombreux styles et propriétés de boutons natifs. Cet article explique comment utiliser CSS3 pour implémenter des boutons magnifiques et hautement interactifs.

1. Styles CSS de base

Tout d’abord, définissons quelques styles CSS de base. En HTML, nous utilisons souvent la balise "" pour créer des boutons. Ce qui suit est un code CSS de base qui peut modifier le style du bouton pour le rendre plus lisible et plus beau.

button {
  display: inline-block;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background-color: #007aff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

Dans ce code, les attributs "display: inline-block" et "border: none" définissent le bouton sur un élément de bloc en ligne sans bordure. La propriété "border-radius" définit les coins en arcs, aplatissant l'apparence de l'ensemble du bouton. La propriété "padding" ajuste la taille du remplissage du bouton à 10 pixels pour les côtés supérieur et inférieur, et à 20 pixels pour les côtés gauche et droit, ce qui le rend plus spacieux et cliquable. Les propriétés « font-size » et « font-weight » facilitent la lecture et la séparation du texte. L'attribut "text-align: center" centre le texte de l'étiquette horizontalement, ce qui est important car les boutons contiennent souvent plusieurs lignes de texte. Les propriétés "color" et "background-color" contrôlent la couleur du texte et de l'arrière-plan. Enfin, le "cursor: pointer" contrôlera le type de curseur lorsque la souris survole le bouton, et la propriété "transition" contrôlera l'effet de transition dégradé de la couleur d'arrière-plan.

2. Effet de survol

Avec CSS3, nous pouvons appliquer des effets spéciaux lorsque la souris survole le bouton. Voici un code d'effet de survol CSS pour rendre le bouton plus vivant :

button:hover {
  background-color: #4ea4f4;
}

Dans ce code, basé sur le code de style "bouton", nous ajoutons un sélecteur de pseudo-classe ":hover", qui changera la couleur d'arrière-plan du bouton. . À l'aide du sélecteur ":hover", nous pouvons changer la couleur d'arrière-plan du bouton d'une couleur normale à un bleu plus saturé lorsque l'utilisateur le survole.

3. L'état d'activité du bouton

Une fois que l'utilisateur clique sur le bouton et réactive sa fonction, l'état d'activité du bouton peut être vu. Afin d'obtenir cet effet, nous pouvons utiliser le sélecteur de pseudo-classe ":active", qui peut changer l'apparence du bouton lorsque le bouton est enfoncé, par exemple, l'apparence du bouton passe du clair au foncé.

button:active {
  background-color: #005cb9;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(1px);
}

Ce code implémente également le sélecteur ":active" sur le style de base "button". Cela changera l'apparence du bouton en changeant la couleur d'arrière-plan, en ajoutant une ombre de boîte et un léger déplacement du bouton. Par conséquent, ces changements subtils rendent le bouton plus actif et spirituel par rapport au bouton habituel.

4. Ajouter des icônes aux boutons

Évidemment, la conception Web moderne ne s'arrête pas aux polices et aux éléments de blocage, nous utilisons généralement des icônes dans les interfaces utilisateur. Par conséquent, l’ajout d’icônes aux boutons est l’un des moyens importants pour les rendre plus attrayants et facilement identifiables. Les graphiques vectoriels évolutifs peuvent être mis en œuvre rapidement à l'aide d'icônes de police ou d'icônes SVG, et ils sont également très respectueux des performances et du référencement de votre site Web. Voici le code CSS d'un bouton avec l'icône “搜索” ajoutée :

button[data-icon]:before {
  font-family: 'FontAwesome';
  content: attr(data-icon);
  padding-right: 5px;
}

Ce code définit l'attribut "data-icon", qui est attaché au bouton en tant qu'attribut personnalisé et peut ensuite être utilisé en CSS. La propriété "font-family" est définie sur la police FontAwesome, qui est la police d'icônes la plus utilisée. Nous devons d'abord introduire le fichier CSS FontAwesome dans l'en-tête du fichier HTML. Enfin, le sélecteur de pseudo-classe ":before" est utilisé pour ajouter un élément de pseudo-classe avec une icône générée en fonction de l'attribut "data-icon" avant le bouton.

5. Bouton rond

CSS nous permet également de changer le bouton en forme ronde. Voici un exemple de code qui implémente un bouton rond :

button.round {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  text-indent: -999999px;
  border: none;
  background: #007aff url('/path/to/image') no-repeat center center / contain;
}

Ce code CSS crée un style de classe "rond". Dans le code ci-dessus, nous définissons la propriété "border-radius" du bouton à 50 %, transformant le bouton en cercle. Définir les propriétés « hauteur » et « largeur » sur 50 px redimensionnera la hauteur et la largeur du bouton à la même taille. Le texte utilisé à ce stade est "text-indent: -999999px;", ce qui fait que le texte s'étend au-delà du côté gauche du bloc de texte et le cache de l'écran. De cette façon, la forme arrondie est préservée et le contenu du texte ne peut pas interférer avec le bouton. Enfin, la propriété « background » est utilisée pour définir l'arrière-plan du bouton circulaire, y compris la couleur, le chemin de l'image et la position.

Conclusion

Dans cet article, nous avons présenté comment utiliser la technologie CSS3 pour créer de magnifiques boutons interactifs. En utilisant des styles CSS de base, des effets de survol, des effets en direct et des effets d'icônes, nous pouvons créer des interfaces utilisateur modernes et faciles à utiliser. CSS3 fournit de nombreuses nouvelles propriétés et fonctions, permettant aux novices et aux experts en développement Web de travailler ensemble pour créer de plus belles interfaces Web en phase avec la tendance du temps.

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!