How to create this button shape CSS only?

Question

I'm stumped for an answer how to do this button with CSS. The easiest way was using an :after with a background image for the right part but this isn't nice and clean when it comes to hover effects.

I've been able to solve it by myself with just the blue arrow on the right but this "double arrow" makes me crazy.

Possible duplicate of [Elongated hexagon shaped button using only one element](http://stackoverflow.com/questions/25445118/elongated-hexagon-shaped-button-using-only-one-element) — JulesDoe, Jan 21 '17 at 00:27
Does it need to be a single element, or can you have a child element? — Brett DeWoody, Jan 21 '17 at 00:52
Similar thread - http://stackoverflow.com/questions/33218348/create-a-button-with-double-arrows-at-the-end/33228965#33228965 — Harry, Jan 21 '17 at 06:11

score 6 · Accepted Answer · answered Jan 21 '17 at 00:05

background gradient maybe ?

button {
  margin:1em;
  border:none;
  padding:0.25em 3em 0.25em 1em;
  text-align:left;
  background:
    linear-gradient(-120deg, transparent 1em, #0099C3 1.05em , #0099C3 1.5em, transparent 1.45em, transparent 2em, #0099C3 2.05em) top no-repeat,
    linear-gradient(300deg, transparent 1em, #0099C3 1.05em , #0099C3 1.5em, transparent 1.45em, transparent 2em, #0099C3 2.05em) bottom no-repeat ;
  background-size: 100% 50%;
  color:white
}

<button>button button <br/> button</button>

Brett DeWoody · Answer 2 · 2017-01-21T01:27:30.260

This feels a bit janky but it works. Uses a single element with :before and :after pseudo-elements to create the arrows. This demo uses a max-width that can be changed depending on use. The height probably needs to stay fixed to work however.

Note: the chevron (white arrow) extends beyond the top/bottom of the bar and will overlap other elements, so you would need to wrap this element in another div with overflow: hidden or make sure to space other elements so the overlap doesn't effect neighboring elements.

.chevronlabel {
  background-color: #0099C3;
  max-width: 200px;
  height: 52px;
  display: inline-block;
  color: #ffffff;
  box-sizing: border-box;
  font-family: Arial;
  padding: 8px 30px 8px 12px;
  position: relative;
}

.chevronlabel:before {
  content: '';
  position: absolute;
  right: -13px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 26px solid transparent;
  border-left: 13px solid #0099C3;
  border-bottom: 26px solid transparent; 
}

.chevronlabel:after {
  border-style: solid;
  border-color: #ffffff;
  border-width: 15px 15px 0 0;
  content: '';
  display: inline-block;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  right: -10px;
  transform: rotate(-45deg);
  vertical-align: top;
  transform: rotate(45deg) skew(20deg, 20deg) translate(-50%);
}

<div class="chevronlabel">
  Button Text and More Text
</div>

score -1 · Answer 3 · answered Jan 21 '17 at 00:25

-1

You can do this with CSS shapes.

Another god way would be inline SVG.

Further Read: https://css-tricks.com/working-with-shapes-in-web-design/

answered Jan 21 '17 at 00:25

JulesDoe

143
9

SVG seems a good approach, you should set up a snippet here to avoid your answer being downvoted. CSS shapes on the other side do not fit the requirement in my own humble opinion :) – G-Cyrillus Jan 23 '17 at 21:37

How to create this button shape CSS only?

3 Answers3