Can a Single CSS Element Create an Elongated Hexagonal Button?

Create Elongated Hexagonal Buttons with CSS (Single Element Solution)

In the realm of button design, the elongated hexagon shape often catches the eye. While typically achieved using multiple elements, is it possible to create such a button using only one?

The answer is yes! Here's a creative solution to achieve this unique design:

Building the Base Shape

1. Utilize two pseudo-elements (:before and :after) with a size approximately half of the main button element.
2. Set different heights for the pseudo-elements to create the slanted lines.

Achieving the Tilt Effect

1. Transform the :before element using perspective and rotateX to create a tilted effect. Rotate towards the front slightly.
2. Apply a similar transform to the :after element, but rotate towards the back slightly.

Positioning the Elements

1. Place the :before and :after elements next to each other, creating a contiguous shape.
2. Use absolute positioning to adjust their alignment.

Emphasizing with Borders and Colors

1. Add borders to both pseudo-elements for a defined shape.
2. Apply appropriate colors to further enhance the appearance.

Interactive Effects (Optional)

1. Style the main button and pseudo-elements with hover transitions to add interactive behavior.
2. Customize the colors and effects as desired.

Code Example

/* 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>
  

By leveraging this ingenious approach, you can effortlessly create captivating elongated hexagonal buttons using just one element. This technique adds a touch of elegance and uniqueness to any user interface.

The above is the detailed content of Can a Single CSS Element Create an Elongated Hexagonal Button?. For more information, please follow other related articles on the PHP Chinese website!