JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="speechbubble">
        <a href="#">Button Text</a>
    </div>
</div>

CSS

/* just a wrapper */
#wrapper {
    position: absolute ;
    top: 20px ;
    left: 20px ;
}


/* speechbubble class */
.speechbubble {
    position: relative ;
    width: 200px ;
    color: #000 ;
    background: #f3961c ;
    background: -moz-linear-gradient( top, #f9d835, #f3961c ) ;
    background: linear-gradient( top, #f9d835, #f3961c ) ;    
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;
    border-radius: 10px ;
}

.speechbubble:hover {
    background: #f4A72D ;
}


/* speechbubble::after */
.speechbubble:after {
   position: absolute ;
   content: "" ;
   display: block ;
   left: 50px ;
   bottom: -15px ;
   width: 0 ;
   border-width: 25px 25px 0 ;
   border-style: solid ;
   border-color: #f3961c transparent ;
}

.speechbubble:hover::after {
    border-color: #f4A72D transparent ;
}


/* anchor element */
.speechbubble a {
    display: block ;
    padding: 15px ;
    color: #444 ;
    text-decoration: none ;
}

.speechbubble a:hover {
    color: #000 ;
}