CSS：如何在右侧创建一个带有箭头的按钮

Question

我需要重现以下按钮：

我已经尝试创建它，但右边的箭头与图片中的箭头不同。如何重现相同的白色箭头？

.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 1

我在这里为你做了jsFiddle

编辑HTML：

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

您可以从边框创建CSS3箭头：

.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;
}

Answer 2

可能会帮助你

＆＃13;

＆＃13;

.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;
   
    }

  .arrowBtn {
    display: inline-block;
    line-height: 2.5em;
    text-align: center;
    background: #333;
    color: white;
    font-size: 1em;
    width: 2.5em;
    transition: margin 200ms;
    margin-left: .75em;
    position:relative;
    left:2px;
  }



.sBtn-go .arrowBtn {
    background-color: #B6AFB1;
  }
  .sBtn-go .arrowBtn:hover {
    }
   .sBtn-go .arrowBtn {
      background-color: desaturate(darken(#F8AD6C,5%),5%);
    }

＆＃13;

<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">&#x25BA</span></button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.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;
   
    }

  .arrowBtn {
    display: inline-block;
    line-height: 2.5em;
    text-align: center;
    background: #333;
    color: white;
    font-size: 1em;
    width: 2.5em;
    transition: margin 200ms;
    margin-left: .75em;
  }



.sBtn-go .arrowBtn {
    background-color: #B6AFB1;
  }
  .sBtn-go .arrowBtn:hover {
    }
   .sBtn-go .arrowBtn {
      background-color: desaturate(darken(#F8AD6C,5%),5%);
    }

<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">&#x25BA</span></button>