JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<a href="#" class="send-invitation-button">Send invitation</a>

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}
body{
   padding: 50px;
   font-family: Arial;    
}

.send-invitation-button {
   background: #31838E;
   text-decoration: none;
   color: white;
   font-weight: bold;
   padding: 10px;
   font-size: 80%;
   display: block;
   height: 36px;
   float: left;
}
.send-invitation-button::before {
    content: "";
    position: absolute;
    border-width: 16px 16px 0;
    border-style: solid;
    display: block;
    width: 0;
    border-width: 18px 18px 18px 0;
    border-color: transparent #31838E;
    margin-left: -28px;
    margin-top: -10px;
}
.send-invitation-button:hover{
    margin-left: -10px;
    background: #5caab5;
}
.send-invitation-button:hover:before{

}