<button>Кнопка</button>

<a href="#" class="knopka">Посмотреть описание</a>

<style>
a.knopka {
color: #fff; /* цвет текста */
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: rgb(212,75,56); /* фон кнопки */
padding: .7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
}
a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
a.knopka:active { background: rgb(152,15,0); } /* при нажатии */
</style>

<a href="#" class="button7">Добавить в корзину</a>

<style>
a.button7 {
     font-weight: 700;
     color: white;
     text-decoration: none;
     padding: .8em 1em calc(.8em + 3px);
     border-radius: 3px;
     background: rgb(64,199,129);
     box-shadow: 0 -3px rgb(53,167,110) inset;
     transition: 0.2s;
}    
a.button7:hover { background: rgb(53, 167, 110); }
a.button7:active {
     background: rgb(33,147,90);
     box-shadow: 0 3px rgb(33,147,90) inset;
}
</style>

<a href="#" class="button8">Подключить</a>

<style>
a.button8 {
    display: inline-block;
    color: white;
    font-weight: 700;
    text-decoration: none;
    user-select: none;
    padding: .5em 2em;
    outline: none;
    border: 2px solid;
    border-radius: 1px;
    transition: 0.2s;
}   
a.button8:hover { background: rgba(255,255,255,.2); }
a.button8:active { background: white; }
</style>

<a href="#" class="button24">Как у Сбербанка</a>

<style>
a.button24 {
   display: inline-block;
   color: white;
   text-decoration: none;
   padding: .5em 2em;
   outline: none;
   border-width: 2px 0;
   border-style: solid none;
   border-color: #FDBE33 #000 #D77206;
   border-radius: 6px;
   background: linear-gradient(#F3AE0F, #E38916) #E38916;
   transition: 0.2s;
}  
a.button24:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
a.button24:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }
</style>