2

is there a way to create such button in css? The one with "blog" text. I tried adding a div into each corner, giving these divs borders and rotating them, but as you can see (the Anout Me btn) it is not the best solution as the corners don't fit accurately.

button with sharp corners and border attempt for the btn

Thank you for your ideas!

vit libovicky
  • 45
  • 1
  • 4
  • Does it have to be a single ` – Patrick Roberts Jun 02 '17 at 22:02
  • Possible duplicate of [Flat sharp corner or beveled corners](https://stackoverflow.com/questions/10883963/flat-sharp-corner-or-beveled-corners) – noahnu Jun 02 '17 at 22:05

2 Answers2

4

There is no CSS rule to do it, but it is possible. You would need a inline-block or block element for your button, with a border on the left and right side. Then, you would need to place (with absolute positioning) two pseudo-elements ::before and ::after on the top and bottom part of the container. Simply add perspective and rotate the X value of the elements accordingly and you're good to go. It might not be "pixel perfect" on every device but it'll look damn near perfect on most recent devices and browsers.

You can have a look at these hexagonal buttons I made a little while ago to get a better idea: https://codepen.io/chriskirknielsen/pen/MpXKVV

EDIT: Here's a code snippet instead of a Codepen link:

*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: .25s all .02s ease-in-out;
}

body, html {
  text-align: center;
  font-family: sans-serif;
  font-size: 32px;
  background-color: #123143;
  height: 100%;
}

.button--hexagon {
  position: relative;
  margin: 1rem auto;
  text-align: center;
  font-size: .5rem;
  line-height: .5rem;
  vertical-align: middle;
  color: #ffce00;
  display: inline-block;
  border-width: 0;
  border-style: solid;
  border-color: #ffffff;
  padding: .5rem;
  cursor: pointer;
  background: transparent;
  width: calc(100% / 6);
}

.button--hexagon span {
  z-index: 20;
  position: relative;
}

.button--hexagon::before, .button--hexagon::after {
  content: '';
  position: absolute;
  border-color: inherit;
  border-style: inherit;
  height: 50%;
  width: 100%;
  left: 0;
  z-index: 10;
  background-color: rgba(18, 49, 67, 0.75);
}

.button--hexagon::before {
  border-width: 2px 2px 0 2px;
  top: 0;
  transform-origin: center bottom;
  transform: perspective(0.5rem) rotateX(3deg);
}

.button--hexagon::after {
  border-width: 0 2px 2px 2px;
  bottom: 0;
  transform-origin: center top;
  transform: perspective(0.5rem) rotateX(-3deg);
}

.button--hexagon:hover {
  color: #123143;
  border-color: #ffce00;
}

.button--hexagon:hover::before,
.button--hexagon:hover::after {
  background: #ffce00;
}
<button class="button--hexagon"><span>Some text</span></button>
chriskirknielsen
  • 2,839
  • 2
  • 14
  • 24
0

Not easily with CSS there is not. You could try to use CSS shapes to get a rough similarity - but as shapes, you wont be able to get it exact and you likely wont be able to put a proper stroke on it if that is your intention.

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
}

#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

#octagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}
Korgrue
  • 3,430
  • 1
  • 13
  • 20