JSFiddle - React, Tailwind, and code Playground

by cherryflavourpez

HTML

<a href="" class="button orange-grad">More on Norcott &rarr;</a>

CSS

body {
    background: url(http://placekitten.com/300/300);
    padding: 1em;
}
.button {    
    color: #FFFFFF;
    font-family: 'RalewayRegular',Arial,sans-serif;
    font-size: 1em;
    padding: 0.5em 1.2em 0.5em 0.8em;
    position: relative;
    text-decoration: none;
    background: #ffa13e; /* fallback */
    background: -webkit-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
    background: -moz-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
    background: -o-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
    background: linear-gradient(-45deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
}

.button:hover {
    background: -webkit-linear-gradient(135deg, transparent 10px, #E56204 10px, #ffa13e 100%);
    background: -moz-linear-gradient(135deg, transparent 10px, #E56204 10px, #ffa13e 100%);
    background: -o-linear-gradient(135deg, transparent 10px, #E56204 10px, #ffa13e 100%);
    background: linear-gradient(-45deg, transparent 10px, #E56204 10px, #ffa13e 100%);
}