CODEWITHSUNDEEP
cssbutton
heartcodiert
heartcodiert

Reputation: 3

How to create this button shape CSS only?

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.

enter image description here

Upvotes: 0

Views: 6475

Answers (3)

Brett DeWoody
Brett DeWoody

Reputation: 62881

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>

Upvotes: 0

JulesDoe
JulesDoe

Reputation: 143

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/

Upvotes: -1

G-Cyrillus
G-Cyrillus

Reputation: 106058

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>

Upvotes: 6

Related Questions