Conception de boutons Web CSS : créez une variété de styles de boutons sympas

Conception de boutons Web CSS : créez différents styles de boutons sympas, des exemples de code spécifiques sont nécessaires

Dans la conception Web, les boutons sont un élément très important, car ils ne constituent pas seulement le lien entre les utilisateurs et le site Web, mais augmentent également la effet visuel global et expérience utilisateur. Un bon style de bouton doit non seulement avoir une apparence attrayante, mais également prendre en compte certains détails fonctionnels, tels que les effets de clic, les effets de survol, etc. Cet article partagera avec vous quelques techniques de conception de boutons CSS et des styles sympas, et fournira des exemples de code. J'espère qu'il pourra vous aider à mieux concevoir des boutons et à ajouter plus de créativité aux sites Web et aux applications.

1. Bouton CSS de base

Tout d'abord, jetons un coup d'œil au style de bouton CSS le plus basique :

Code HTML :

<button class="btn">Click me</button>  

Style CSS :

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:hover {
  background-color: #3e8e41;
}

Ce bouton a un fond vert, un texte blanc et une bordure arrondie. Lorsque la souris survole le bouton, la couleur d'arrière-plan passe au vert foncé, obtenant un simple effet de survol. Ce style de bouton peut être appliqué à la plupart des scénarios.

2. Bouton d'effet stéréoscopique 3D

Créons un bouton d'effet stéréoscopique 3D :

Code HTML :

<button class="btn-3d">Click me</button>

Style CSS :

.btn-3d {
    border: none;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    margin: 20px;
    padding: 10px 20px;
    position: relative;
    text-align: center;
    text-shadow: rgba(0,0,0,.4) 1px 1px;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
    background: linear-gradient(to bottom, #556270 0%,#616161 100%);
    background-color: #556270;
}

.btn-3d:before,
.btn-3d:after {
    border: none;
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    height: 4px;
    width: 100%;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
}

.btn-3d:before {
    background: #BD3F32;
    transform: translateZ(-1px);
    box-shadow: 0 0 8px rgba(189,63,50,.7);
}

.btn-3d:after {
    background: #3F7FBC;
    transform-origin: left;
    transform: rotateY(90deg) translateZ(-1px);
    box-shadow: 0 0 8px rgba(63,127,188,.7);
}

.btn-3d:hover {
    background: linear-gradient(to bottom, #BD3F32 0%,#616161 100%);
    transform: translateZ(-6px);
    text-shadow: none;
    box-shadow: 0 0 8px rgba(0,0,0,.5);
}

.btn-3d:hover:before {
    transform: translateZ(-13px) rotateY(60deg);
}

.btn-3d:hover:after {
    transform: rotateY(-60deg) translateZ(-13px);
    transition-delay: .05s;
}

Ce style de bouton a un effet d'apparence stéréoscopique 3D évident et un état de survol. L'effet de traduction/rotation n'est pas visible. apporte uniquement un impact visuel aux utilisateurs, mais augmente également l'expérience utilisateur.

3. Bouton de changement d'arrière-plan

Le style de bouton suivant offre aux utilisateurs de meilleurs repères visuels grâce au changement de dégradé de couleur d'arrière-plan :

Code HTML :

<button class="btn-change">Click me</button>

Style CSS :

.btn-change {
    cursor: pointer;
    display: inline-block;
    margin: .5rem;
    padding: .75rem 1.5rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.btn-change:before {
    border-right: 1px solid white;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skew(-15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:before {
    width: 100%;
    transition: all .3s ease;
}

.btn-change:after {
    border-left: 1px solid white;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:after {
    width: 100%;
    transition: all .3s ease;
    transition-delay: .15s;
}

Ce style de bouton La caractéristique est que l'arrière-plan la couleur change plus progressivement en survol, ce qui peut mieux guider les utilisateurs visuellement.

4. Bouton à effet creux

Ensuite, nous allons créer un style de bouton à effet creux très cool :

Code HTML :

<button class="btn-void">Click me</button>

Style CSS :

.btn-void {
    border: solid 2px #bada55;
    background: none;
    color: #bada55;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    position: relative;
    transition: all .35s;
    overflow: hidden;
}

.btn-void:before,
.btn-void:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bada55;
    transition: all .35s;
}

.btn-void:before {
    height: 0%;
    width: 100%;
}

.btn-void:after {
    height: 100%;
    width: 0%;
}

.btn-void:hover,
.btn-void:focus,
.btn-void:active {
    border-color: #bada55;
    color: #fff;
}

.btn-void:hover:before,
.btn-void:focus:before,
.btn-void:active:before {
    height: 100%;
}

.btn-void:hover:after,
.btn-void:focus:after,
.btn-void:active:after {
    width: 100%;
}

La caractéristique de ce style de bouton est qu'en état de survol, le zone environnante du bouton Une bordure blanche apparaît, la zone de forme rectangulaire à l'intérieur du bouton devient blanche et le texte du bouton devient vert. Lorsque l'ensemble est restauré, on constate un effet de dégradé.

5. Bouton de chargement

Enfin, regardons un style de bouton avec l'état de chargement :

Code HTML :

<button class="btn-loading">Submit</button>

Style CSS :

.btn-loading {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  position: relative;
}

.btn-loading:after {
  content: "";
  position: absolute;
  top:50%;
  left: 50%;
  border: 6px solid #e6e6e6;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-loading.loading:after {
  display: block;
}

La caractéristique de ce style de bouton est qu'après avoir cliqué sur le bouton de soumission, le bouton le contenu sera masqué et une animation rotative apparaîtra pour rappeler à l'utilisateur qu'il est en cours de chargement. L'effet global est relativement intuitif.

Résumé

Grâce à l'introduction des cinq styles de boutons ci-dessus, nous pouvons clairement voir qu'un bon bouton a non seulement besoin d'effets visuels attrayants, mais doit également prêter attention à certains détails fonctionnels, tels que les changements dans l'état de survol, après interactions en cliquant, etc. Les styles de boutons fournis dans cet article sont tous écrits sur la base de CSS et peuvent être facilement appliqués dans des projets réels. Lors de la rédaction de pages Web, vous pouvez accorder plus d'attention à la mise en œuvre de certains effets spéciaux et créer des boutons mieux adaptés à vos besoins.

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!