Un seul élément CSS peut-il créer un bouton hexagonal allongé ?

Créer des boutons hexagonaux allongés avec CSS (Single Element Solution)

Dans le domaine de la conception de boutons, la forme hexagonale allongée attire souvent l'attention . Bien que cela soit généralement réalisé en utilisant plusieurs éléments, est-il possible de créer un tel bouton en utilisant un seul ?

La réponse est oui ! Voici une solution créative pour réaliser ce design unique :

Construire la forme de base

1. Utiliser deux pseudo-éléments (:avant et :après) avec une taille environ la moitié de l'élément du bouton principal.
2. Définissez différentes hauteurs pour les pseudo-éléments afin de créer l'inclinaison lignes.

Obtention de l'effet d'inclinaison

1. Transformez l'élément :before en utilisant la perspective et faites pivoterX pour créer un effet d'inclinaison. Faites légèrement pivoter vers l'avant.
2. Appliquez une transformation similaire à l'élément :after, mais faites légèrement pivoter vers l'arrière.

Positionnement des éléments

1. Placez les éléments :before et :after l'un à côté de l'autre, créant ainsi un forme.
2. Utilisez le positionnement absolu pour ajuster leur alignement.

Souligner avec les bordures et les couleurs

1. Ajouter des bordures aux deux pseudo -éléments pour une forme définie.
2. Appliquez des couleurs appropriées pour améliorer davantage le apparence.

Effets interactifs (facultatif)

1. Stylez le bouton principal et les pseudo-éléments avec des transitions de survol pour ajouter un comportement interactif.
2. Personnalisez les couleurs et les effets comme vous le souhaitez.

Code Exemple

/* General Button Style */

.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;
}

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

En tirant parti de cette approche ingénieuse, vous pouvez créer sans effort des boutons hexagonaux allongés captivants en utilisant un seul élément. Cette technique ajoute une touche d'élégance et d'unicité à toute interface utilisateur.

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!