Button with triangle on a right side in css - html

Question

I have this simple button:
.btn {
border-radius: 2px;
background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
color: rgb(64, 64, 64);
text-align: center;
height: 25px;
border: 1px solid #d9d9d9;
vertical-align: middle;
font-family: "Segoe UI";
box-shadow: 0px 0px 1px #d9d9d9;
}
<button class="btn">Some button</button>
Now I want to make something like this:

Answer 1

It's certainly not perfect, but it ain't too bad...
.btn {
border-radius: 2px;
background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
color: rgb(64, 64, 64);
text-align: center;
height: 25px;
border: 1px solid #d9d9d9;
vertical-align: middle;
font-family: "Segoe UI";
box-shadow: 0px 0px 1px #d9d9d9;
position: relative;
}
.btn span {
position: relative;
z-index: 1;
}
.btn:after {
content: "";
width: 16px;
height: 16px;
background-image: -moz-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -webkit-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
background-image: -ms-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
display: block;
position: absolute;
top: 3px;
right: -9px;
border: 1px solid #d9d9d9;
border-left: none;
border-bottom: none;
border-radius: 2px;
-webkit-transform: rotate(47deg) skew(5deg);
-moz-transform: rotate(47deg) skew(5deg);
transform: rotate(47deg) skew(5deg);
}
<button class="btn"><span>Some button</span></button>

Answer 2

.btn {
position: relative;
background: #c2e1f5;
border: 10px solid #c2e1f5;
}
.btn:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.btn:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 36px;
margin-top: -36px;
}

Answer 3

You can wrap the button in a button and then use the position as relative of the wrapper and then add a :before, you can add a border to the :before and make the width and height 0.
It's hard to explain, it's better if you check this blog: https://developerwings.com/button-with-a-sideways-triangle-using-css-html/