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 — JulesDoe
– JulesDoe, Commented Jan 21, 2017 at 0:27
Does it need to be a single element, or can you have a child element? — Brett DeWoody
– Brett DeWoody, Commented Jan 21, 2017 at 0:52

G-Cyrillus · Accepted Answer · 2017-01-21 00:05:33Z

6

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>

answered Jan 21, 2017 at 0:05

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brett DeWoody · Accepted Answer · 2017-01-21 01:27:30Z

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>

JulesDoe · Accepted Answer · 2017-01-21 00:25:46Z

-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, 2017 at 0:25

JulesDoe

1439 bronze badges

1 Comment

G-Cyrillus Over a year ago

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 :)

Collectives™ on Stack Overflow

How to create this button shape CSS only?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related