Comment puis-je créer un bouton hexagonal allongé en utilisant un seul élément HTML et CSS ?

Création de boutons hexagonaux allongés avec un seul élément

Dans le développement Web, créer des formes de boutons personnalisées peut être un défi, en particulier lorsque vous utilisez uniquement du CSS et en évitant les éléments HTML supplémentaires. Un dilemme courant se pose lorsque l'on tente de créer un bouton hexagonal avec des pointes de flèches allongées de chaque côté.

Approches existantes

Une méthode standard consiste à utiliser à la fois les pseudos :before et :after -éléments pour générer une seule flèche sur un côté. Cependant, cela nécessite l'inclusion d'un autre élément span dans le lien pour créer une flèche du côté opposé, ce qui complique la solution.

Une approche alternative consiste à créer une bordure de début de ruban en utilisant les éléments :after et :before pseudo-éléments aux angles légèrement inclinés. Cependant, cette méthode entraîne souvent un désalignement et des longueurs de pointe de flèche inégales.

Solution améliorée à élément unique

Voici une approche raffinée qui n'utilise qu'un seul élément pour obtenir l'hexagone souhaité. bouton forme :

Code :

HTML :

<a href="#" class="button ribbon-outset border">Click me!</a>

CSS :

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 300px;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
}
.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #e04e5e;
}
.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #e04e5e;
}
.button.border:hover {
  color: #fff;
}

Explication :

• Deux pseudo-éléments (:avant et :after) sont utilisés, chacun avec une hauteur de 34 px (bordures comprises) et une largeur de 300 px (la largeur du bouton).
• La moitié supérieure de la forme est créée en surélevant légèrement l'élément :before à l'aide de rotateX. (3deg).
• La moitié inférieure est formée par l'élément :after, qui est élevé avec rotateX(-3deg) et décalé de 40px pour s'aligner avec le bord supérieur du bouton.
• Les deux pseudo-éléments reçoivent un décalage gauche de 0px et un z-index de -1 pour garantir qu'ils se chevauchent et créent la forme hexagonale.
• Styles de bordure sont appliqués à l'élément bouton pour créer la bordure fine (avec un solide de 4px #e04e5e) et pour rendre invisibles les bordures des pseudo-éléments (aucune pour le bas et le haut bordures).
• Au survol, l'arrière-plan des pseudo-éléments est modifié en #e04e5e et la couleur du texte du bouton devient blanche.

Cette technique crée efficacement une forme d'hexagone allongée. bouton utilisant uniquement CSS et un seul élément HTML, offrant une solution claire et concise au défi de conception.

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!