Посилання як кнопка

Влад Мержевич

Створіть посилання, яке при наведенні на нього курсора миші змінюватиме свій вигляд, як показано на малюнку 1. Зверху показано початкове посилання, знизу посилання після наведення курсора.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Посилання</title>
  <style>
   .c {
    border: 1px solid #333; /* Рамка */
    display: inline-block;
    padding: 5px 15px; /* Поля */
    text-decoration: none; /* Прибираємо підкреслення */
    color: #000; /* Колір тексту */
  }
   .c:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Тінь */
    background: linear-gradient(to bottom, #fcfff4, #e9e9ce); /* Градієнт */
    color: #a00;
   }
  </style>
 </head>
 <body>
   <a href="#" class="c">Коментувати</a>
 </body>
</html>
SEO текст: Створіть посилання, яке змінює свій вигляд при наведенні курсора миші за допомогою CSS3. Вчимося створювати ефективні елементи веб-дизайну з градієнтами та тінями.

Часті запитання