Elongated hexagon shaped button using only one element

by

Here is another alternate way to get this done with only one element.

This approach works like below:

  1. Two pseudo-elements :before and :after which are about half the size (including borders) of the main .button element. The height of each pseudo-element is 34px + 4px border on one side (top/bottom) and 2px on the other side.
  2. The top half of the shape is achieved using the :before element whereas the bottom half is achieved using the :after element.
  3. Using a rotateX with perspective to achieve the tilted effect and positioning to place the two elements such that they form the expected shape.
/* 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;
}
<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

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

Fixed Width Demo | Dynamic Width Demo

Output Screenshot:

enter image description here

This is tested in Chrome v24+, Firefox v19+, Opera v23+, Safari v5.1.7, IE v10.

As-is, this would degrade quite well in IE 8 and IE 9 into a square button with borders. However, due to the nullification of one border (border-bottom for :before and border-top for :after) it would leave a white area (resembling a strike-through line) in the middle. This can be overcome by adding a couple of IE < 10 specific styles using conditional comments like in this demo.

<!--[if IE]>
  <style>
    .button.border:after{
      top: 38px;
    }
    .button.border:hover:before, .button.border:hover:after {
      border-bottom: 4px solid #e04e5e;
    }
  </style>
<![endif]-->

Output Screenshot from IE 9 and IE 8:

enter image description here

More Related Contents:

  1. Can I use a :before or :after pseudo-element on an input field?
  2. Cut Corners using CSS
  3. How to create a circle with links on border side
  4. How to create uneven rounded sides on a div?
  5. Shape with a slanted side (responsive)
  6. :after and :before CSS pseudo elements hack for Internet Explorer 7
  7. CSS Cut out circle from a rectangular shape
  8. CSS content property: is it possible to insert HTML instead of Text?
  9. html/css hexagon with image inside
  10. How to draw circle in html page?
  11. How to bevel the corner of a block div?
  12. Why does a filter gradient on a pseudo element not work in IE8?
  13. Dynamically aligning pseudo element according to parent height
  14. Creating a ‘New’ spiky label with 24 or above point burst
  15. Half circle with CSS (border, outline only)
  16. Slanted diagonal line in html or css?
  17. How can I make a 45 degree responsive ribbon with folded corner?
  18. Border with a transparent centred arrow
  19. Add outward curving border to elements like this: ◝◟___◞◜
  20. How can I make a div with irregular shapes with css3 and html5?
  21. Skewed Borders on a Div
  22. Which elements support the ::before and ::after pseudo-elements?
  23. Pixelated edge around a CSS Circle with overflow: hidden;
  24. div with triangle at the bottom with background image
  25. Responsive CSS Circles
  26. How to create a triangle in CSS3 using border-radius
  27. after pseudo element not appearing in code
  28. pseudo-element acting like a grid item in CSS grid
  29. Create wavy borders in CSS for top and bottom borders
  30. Adding text before list

Leave a Comment