JSFiddle - React, Tailwind, and code Playground

by 7_Paul_21

HTML

<a href="1.html" class="buttonlink">Ссылка</a>
<button class="buttonlink">Кнопка</button>

CSS

.buttonlink {
    display: inline-block; /* Строчно-блочный элемент */
    padding: 5px 20px; /* Добавляем поля */
    text-decoration: none; /* Убираем подчёркивание у ссылки */
    cursor: pointer; /* Курсор в виде руки */
    background: #deefff; /* Фон для браузеров, не поддерживающих градиент */
    /* Градиент */
    background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede));
    background: -webkit-linear-gradient(top, #deefff 0%,#98bede 100%);
    background: -o-linear-gradient(top, #deefff 0%,#98bede 100%);
    background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%);
    background: linear-gradient(top, #deefff 0%,#98bede 100%);
    border-radius: 10px; /* Скругляем уголки */
    border: 1px solid #008; /* Добавляем синюю рамку */
    font: 12px/1 Arial, sans-serif; /* Рубленый шрифт */
    color: #2c539e; /* Цвет текста и ссылки */
   }