Comment créer un bouton en utilisant CSS-tutoriel CSS-php.cn

Comment créer un bouton en utilisant CSS

不言

Libérer： 2018-12-06 14:12:10

original

4937 Les gens l'ont consulté

L'article d'aujourd'hui vous présentera quatre méthodes de mise en œuvre de boutons, notamment les boutons carrés ordinaires, les boutons arrondis, les boutons tridimensionnels et les boutons avec des animations simples. Jetons un coup d'œil au contenu spécifique.

Comment créer un bouton en utilisant CSS

Jetons d'abord un coup d'œil à l'implémentation du bouton carré ordinaire

Le code du bouton est comme suit

Code HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<button>普通方形Comment créer un bouton en utilisant CSS</button>
</body>
</html>

Copier après la connexion

Comment implémenter le bouton à coin arrondi

Le code est le suivant

Code HTML

<button class="kadomaru">圆角Comment créer un bouton en utilisant CSS</button>

Copier après la connexion

Code CSS

.kadomaru {
  width:100px;
  font-size:12px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  background:#6BCBF6;
  border-radius: 20px;
}

Copier après la connexion

Comment implémenter le bouton tridimensionnel

Le code est le suivant

Code HTML

<button class="shadow">立体Comment créer un bouton en utilisant CSS</button>

Copier après la connexion

Code CSS

.shadow {
  width:100px;
  font-size:12px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  background:#6BCBF6;
  border-radius:5px;
  box-shadow:1px 1px #1A6EA0;
}

Copier après la connexion

Utilisez box-shadow pour spécifier la taille et la couleur de l'ombre à créer une sensation tridimensionnelle.

Les effets de bouton obtenus par les trois méthodes ci-dessus sont les suivants

Comment créer un bouton en utilisant CSS

Le dernier est une implémentation de bouton avec une animation simple. un exemple précis

Le code est le suivant

Code HTML

<div class="animation">
  <div class="effect"></div>
  <a href="#"> Touch me </a>

Copier après la connexion

Code CSS

.animation {
  width:100px;
  height:50px;
  text-align:center;
  border:2px solid #BBBBBB;
  float:left;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:0 0 40px 0;
}
.animation a {
  font-family:arial;
  font-size:12px;
  color:#BBBBBB;
  text-decoration:none;
  line-height:50px;
  transition:all .10s ease;
  z-index:2;
  position:relative;
}
.effect {
  width:140px;
  height:50px;
  top:-2px;
  left:-140px;
  background:#BBBBBB;
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.animation:hover .effect {
  left:0;
}
.animation:hover a {
  color:#FFFFFF;
}

Copier après la connexion

Pour présenter un exemple de personnalisation, ajoutez .effect L'attribut gauche devient l'attribut droit, et l'attribut gauche de .animation:hover .effect est remplacé par l'attribut droit, qui peut devenir une animation vers la droite.

Lorsque le code ci-dessus est exécuté, l'effet suivant s'affiche sur le navigateur :

Comment créer un bouton en utilisant CSS

Placez la souris sur le bouton et il y aura une bonne animation pour montrer l'effet. Comme suit

Comment créer un bouton en utilisant CSS

Cet article est terminé ici. Pour plus d'informations sur la création de boutons en CSS, vous pouvez consulter le Tutoriel vidéo CSS<.> ou Tutoriel vidéo CSS3 pour un apprentissage plus approfondi ! ! !

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!