Daniel Daniel - 2 months ago 6
CSS Question

CSS: How to create a button with an arrow placedo on the right

I need to reproduce following button:

enter image description here

I have already tried to create it, but the arrow on the right is not the same as in the picture. How can I reproduce the same white arrow?

.sBtn {
display: inline-block;
background: #908589;
border: 0;
color: #fff;
font-weight: 700;
font-size: 1.2em;
letter-spacing: 0.04em;
line-height: 2.5em;
padding: 0 0 0 1em;
outline: none;
text-decoration: none;
margin-top: 14px;

}

...and so on...


https://jsfiddle.net/jobgaraux/h81z00jL/1/

Answer

Here I made it for you jsFiddle

Edited HTML:

<span class="arrowBtn">&nbsp;<span class="icon"></span></span>

You can create CSS3 arrow from borders:

.sBtn-go .arrowBtn .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 13px;
  border-color: transparent transparent transparent white;
}