Elongated Hexagon Button Creation with a Single Element

In web development, creating custom button shapes can be a challenge, especially when using only CSS and avoiding additional HTML elements. A common dilemma arises when attempting to craft a hexagonal button with elongated arrowheads on either side.

Existing Approaches

One standard method involves utilizing both :before and :after pseudo-elements to generate a single arrow on one side. However, this necessitates the inclusion of another span element within the link to create an arrow on the opposite side, complicating the solution.

An alternative approach involves creating a ribbon-outset border by using the :after and :before pseudo-elements with slightly slanted angles. However, this method often results in misalignment and uneven arrowhead lengths.

Improved Single-Element Solution

Here's a refined approach that employs only one element to achieve the desired hexagonal button shape:

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

Explanation:

• Two pseudo-elements (:before and :after) are used, each with a height of 34px (including borders) and a width of 300px (the button's width).
• The top half of the shape is created by elevating the :before element slightly using rotateX(3deg).
• The bottom half is formed by the :after element, which is elevated with rotateX(-3deg) and offset by 40px to align with the top edge of the button.
• Both pseudo-elements are given a left offset of 0px and a z-index of -1 to ensure they overlap and create the hexagonal shape.
• Border styles are applied to the button element to create the thin border (with 4px solid #e04e5e) and to make the borders of the pseudo-elements invisible (none for bottom and top borders).
• On hover, the background of the pseudo-elements is changed to #e04e5e and the button's text color becomes white.

This technique effectively creates an elongated hexagon-shaped button using only CSS and a single HTML element, providing a clean and concise solution to the design challenge.

The above is the detailed content of How Can I Create an Elongated Hexagon Button Using Only One HTML Element and CSS?. For more information, please follow other related articles on the PHP Chinese website!