How to Create an Elongated Hexagon Button with Arrows Using Only CSS?

Elongated Hexagon-Shaped Button with a Single Element

Challenge:

Our goal is to create an elongated hexagon-shaped button using only CSS, without relying on additional elements. The button should feature an extended ribbon-like border with arrows pointing outward on both sides.

Solution 1 (Provided in the Question):

This approach utilizes two pseudo-elements (::before and ::after) to create the ribbon borders. However, it results in asymmetry and improper centering of the arrowheads.

Improved Solution:

To refine the design and address the limitations, we propose an alternate solution that employs a different CSS strategy:

Concept:

This approach entails:

1. Utilizing ::before and ::after pseudo-elements that constitute half the size of the main button element.
2. Positioning these pseudo-elements to form the top and bottom halves of the hexagon.
3. Employing rotateX with perspective to achieve the desired tilt effect.

Implementation:

/* General Button Style */

.button {
  /* Properties as before... */
}

/* Pseudo-elements */

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

.button:before {
  /* Top half; adjust rotation here... */
}

.button:after {
  /* Bottom half; adjust rotation here... */
  top: 40px;
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  /* Properties as before... */
}

/* Etc., omitted for brevity */

Explanation:

• The pseudo-elements are placed absolutely within the main button element.
• The top pseudo-element is rotated clockwise while the bottom is rotated counterclockwise, giving the appearance of a tilt.
• The borders are applied to the pseudo-elements, creating the hexagonal shape.
• This design allows for full customization of the button's shape and dimensions by adjusting the width and height of the pseudo-elements, as well as their transform properties.

The above is the detailed content of How to Create an Elongated Hexagon Button with Arrows Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!