Question

Я хочу установить к себе на сайт один из этих кнопок https://html5book.ru/krasivye-knopki-dlya-sayta/ , в каком месте мне нужно размещать css - чтобы было всё норм и с каждым разом не изкажать дизайн сайта?

Answer 1

Чтобы не искажать дизайн, не устанавливайте в стили это:

body {background: #d6eaf8}

Вот правильней сделать так, кнопку установить таким кодом:

<a class="knopka" href="">Button</a>

и в стили прописать что-то подобное:

a.knopka {
  text-decoration: none;
  outline: none;
  display: inline-block;
  color: white;
  padding: 20px 30px;
  margin: 10px 20px;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);
  background-size: 200% auto;
  box-shadow: 0 0 20px rgba(0,0,0,.1);
  transition: .5s;
}
a.knopka:hover {background-position: right center;}

в итоге стили применятся не к всем ссылкам на сайте, а только к этой конкретной.

Comments

Не вышло! Я добавил код _ и дизайн исказился!

---

Владислав Демченко,

1. Прежде всего удалите все с таблицы стилей CSS и вставьте содержимое с файла http://mailcash.do.am/.s/src/css/1254.css жмем кнопку сохранить.
2. После добавьте те стили которые я выше говорил и жмем кнопку сохранить.
3. После чистим кеш в браузере https://ukit.com/ru/help/kak-ochistit-cahe
4. Проверяем результат.

---

Yuri_Geruk,

Постоянно забываю чистить кэш! Как можно растянуть эту кнопку по всей ширыне страницы http://mailcash.do.am/index/razrabotchik/0-6 :?