How Can I Create an Elongated Hexagonal Button Using Only One HTML Element and CSS?

Creating an Elongated Hexagon-Shaped Button with Only One Element

Problem:

Can you create a hexagonal-shaped button using solely HTML and CSS without resorting to multiple elements?

Possible Solution:

Below is an alternative method to achieve this effect using only a single element:

1. Utilize Pseudo-Elements: Employ :before and :after pseudo-elements that mimic half the size of the main button, including borders.
2. Define Shape Halves: The :before element forms the top half of the shape, while :after forms the bottom half. Each has a specific height and border arrangement to resemble a hexagon.
3. Skew and Position: RotateX with perspective is used to tilt the pseudo-elements and positioning them appropriately to form the overall button shape.

Example Code:

/* 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 {
  border: 4px solid #e04e5e;
}

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

.button.border:hover {
  color: #fff;
}

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

Note: To use browser prefixes, include modernizr or prefixes.

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