JSFiddle - React, Tailwind, and code Playground

by dimasgrig1575

HTML

<a href="#" class="css-button">
    <span class="css-button-text">ПОДРОБНЕЕ</span>
    <span class="css-button-icon">
    <svg width="9" height="14" viewBox="0 0 9 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M1.98711 13.6588L7.8271 7.79706C8.28029 7.33981 8.28029 6.60126 7.8271 6.14402L1.98711 0.282232C1.5503 -0.0940772 0.904381 -0.0940772 0.467566 0.282232C-0.0218487 0.703118 -0.0790434 1.44403 0.340278 1.93527L5.35093 6.96468L0.340219 12.0058C-0.112971 12.463 -0.112971 13.2016 0.340219 13.6588C0.795765 14.1137 1.53162 14.1137 1.98711 13.6588Z" clip-rule="evenodd"/>
    </svg>
</span>
    </a>

CSS

.css-button {
            width: 208px;
            height: 48px;
            font-family: Arial;
            color: #44aee3;
            font-size: 18px;
            border-radius: 3px;
            border: 1px #44ADE3 solid;
            background-color: #ffffff;
            text-decoration:none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
        }
        .css-button:hover,.css-button-icon svg:hover,.css-button-text:hover {
            background-color: #44aee3;
            color: #fff;
        }
        .css-button-icon {
            padding: 10px 12px;
            color: #44aee3;
            text-shadow: none;
        }
        .css-button-icon {
            vertical-align: middle;
            position: relative;
        }
        .css-button-text {
            padding-left: 38px;
        }