JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="http://malsup.github.io/jquery.corner.js"></script>
<a href="#" class="arrow-btn myCorner">GO &#187;</a>

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu);
body{
    padding:60px;
    background-color:black;
}
.arrow-btn{
    display:inline-block;
    padding:20px 70px 20px 20px;/*50px + 20 for the arrow*/
    border:1px solid #0B4278;
    -webkit-box-shadow: inset 0 0 3px #00A8D9;
    -moz-box-shadow: inset 0 0 3px #00A8D9;
    box-shadow: inset 0 0 3px #00A8D9;
    color:#ffffff;
    text-decoration:none;
    font-family: 'Ubuntu', sans-serif;
    text-align:center;
    
    background: #0092ff; /* Old browsers */
    background: -moz-linear-gradient(top,  #0092ff 0%, #0067b4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0092ff), color-stop(100%,#0067b4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #0092ff 0%,#0067b4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #0092ff 0%,#0067b4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #0092ff 0%,#0067b4 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #0092ff 0%,#0067b4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0092ff', endColorstr='#0067b4',GradientType=0 ); /* IE6-9 */

}

JavaScript

$('.myCorner').corner("bevel right 50px");

/*normally its made for beveled corners but if you give a bigger bevel than the height of the box it creates an x effect witch makes the button look like an arrow

http://jquery.malsup.com/corner/
*/