CODEWITHSUNDEEP
css
Daniel
Daniel

Reputation: 63

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/

Upvotes: 1

Views: 1592

Answers (3)

Ganesh Putta
Ganesh Putta

Reputation: 2681

may be this will help youl

.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%);
    }
<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">&#x25BA</span></button>

Upvotes: 1

Patrik Kreh&#225;k
Patrik Kreh&#225;k

Reputation: 2683

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

Upvotes: 1

Gowtham
Gowtham

Reputation: 1597

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

Upvotes: 0

Related Questions