Create a Button with right triangle/pointer

Question

Looking to create this:

What would be the best way to achieve it?

IT MUST: I'd definitely like to keep the text as text (so not using an image). Also, I'd like this to be re-usable so that I can put different text in it. Ideally, the arrow part should be as high as the text.

NICE TO HAVE: I'd like to be able to drop this on any background (so it isn't always on white) Would be great if it was ie8+

Thanks!!

Answer 1

Alfred's solution did the trick to get a right arrow button. I wanted this to be dynamic so I could reuse it across multiple projects and easily adjust the width and height of the button. I was able to use CSS variables to do the calculations to modify the button according to the base width and height. This can be tweaked even further by moving the text of the button to be centered taking into place the addition of the triangle on the right.

See live demo here: https://jsfiddle.net/azarue/7bdhm825/

.arrow-button-container {
    --arrow-button-width: 160;
    --arrow-button-height: 58;
    --arrow-button-bg-color: #b8282e;
    background: var(--arrow-button-bg-color);
    border: none;
    display: inline-block;
    height: calc(1px * var(--arrow-button-height));
    line-height: calc(1px * var(--arrow-button-height));
    position: relative;
    text-decoration: none;
    width: calc(1px * var(--arrow-button-width));
    cursor: pointer;
}

.arrow-button-container:before{
    --rotate-square-side: calc(1px * var(--arrow-button-height) / sqrt(2));
    background: var(--arrow-button-bg-color);
    border: none;
    content: '';
    display: block;
    left: calc(1px * var(--arrow-button-width) - 1px * var(--arrow-button-height) / sqrt(2) / 2);
    position: absolute;
    top: calc(var(--rotate-square-side)/sqrt(2) - var(--rotate-square-side)/2);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    width: var(--rotate-square-side);
    height: var(--rotate-square-side);
}

.arrow-button-container button {
    color: #fff;
    background: none;
    border: none;
    font-weight: bold;
    position: relative;
    width: calc(1px * var(--arrow-button-width));
    height: calc(1px * var(--arrow-button-height));
}

<a class="arrow-button-container" href="#">
  <button>Button</button>
</a>

Answer 2

Have you tried something using html/css??

#vert_menu{   overflow: hidden;  width: 100%; }
#vert_menu li{  float: left; }
#vert_menu a{
  padding: 8px 20px 8px 40px;
  float: left; text-align:center;
  text-decoration: none; font: normal 16px Myriad Pro, Helvetica, Arial, sans-serif;  text-shadow:0px 1px 0px #000;
  color: #e6e2cf;
  position: relative; text-shadow:1px 0 0 #000;
  background: #525252;  min-width:181px; width:auto
}

#vert_menu a::after,
#vert_menu a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -19px;   
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#vert_menu a::after{   z-index: 2;  border-left-color: #525252;   }

<ul id="vert_menu">
<li><a href="#" class="current">test</a></li>
</ul>

Answer 3

You may this in your HTML;

<div>
    <a href="#"><button>Button</button></a>
</div>

And this in your CSS

a {
    background: #950006;
    border: none;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    position: relative;
    text-decoration: none;
    width: 100px
}

a:before{
    background: #950006;
    border: none;
    content: '';
    display: block;
    height: 20px;
    left: 90px;
    position: absolute;
    top: 4px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 21px;
}
a button {
    color: #fff;
    background: none;
    border: none;
    font-weight: bold;
    position: relative;
    width: 120px;
    height: 28px;
}

and will output a button like this:-

Here is a working Live Demo. The complete button is CLICKABLE. You may test the button by changing the background of the parent div.

Hope this helps.