JSFiddle - React, Tailwind, and code Playground

by Siva Subramaniam

HTML

<button class="searchBtn">Search</button>

CSS

.searchBtn {
    position: relative;
    background: #BEED38;
    border: 2px solid #94969B;
    padding: 5px;
    width: 120px;
    height: 44px;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    color: #34363d;
    text-shadow: 1px 1px 1px #fff;
    font-size: 24px;
    border-right: none;
}
.searchBtn:after, .searchBtn:before {
    left: 99%;
    top: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.searchBtn:after {
    border-color: rgba(190, 237, 56, 0);
    border-left-color: #BEED38;
    border-width: 20px;
    margin-top: -20px;
}
.searchBtn:before {
    border-color: rgba(148, 150, 155, 0);
    border-left-color: #94969B;
    border-width: 23px;
    margin-top: -23px;
    border-radius: 4px;
}
.searchBtn:hover {
    background: #6AE5EF;
}
.searchBtn:hover:after {
    border-color: rgba(106, 229, 239, 0);
    border-left-color: #6AE5EF;
}