Hi, what you need is this CSS Button

As follows

.myButton {
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}

A more violent solution is to use pictures. Any issues such as rounded corners, gradients, or incompatibilities can be solved by me

You can use border gradient border-image:linear-gradient(.....)

I have an idea: don’t use border to make small arrows, use transform to make small arrows. If you use transform, you can use background gradient. One thing to note is that since the little arrow is rotated 45 degrees, your background gradient will also be rotated 45 degrees.