Содержание:
Хотите знать как сделать красивую HMML кнопку для сайта? Тогда вы попали по адресу. В данной статье я представлю вам 24 различных вариантов создания красивых и стильных кнопок для вашего сайта.
Ниже представлены варианты HTML кода кнопок для вашего сайта:
Как сделать кнопку на сайте
Кнопка для сайта 1 вариант
Это наиболее простой вариант кнопки с изменением цвета при наведении курсора на кнопку.
Кнопка для сайта 2 вариант
Эта кнопка при наведении на нее визуально вдавливается.
Кнопка для сайта 3 вариант
При наведении кнопка меняет свой цвет и появляются движущиеся рамки.
Кнопка для сайта 4 вариант
Кнопка для сайта 5 вариант
Здесь представлена кнопка с анимацией полос сверху и снизу при наведении.
Кнопка для сайта 6 вариант
Вариант кнопки с движущейся тенью при наведении.
Кнопка для сайта 7 вариант
Еще одна кнопка с красивым визуальным эффектом при наведении курсора. Движущиеся рамки при наведении.
Кнопка для сайта 8 вариант
Вариант похожий на предыдущий но кнопка имеет другое цветовое исполнение.
Кнопка для сайта 9 вариант
Кнопка с эффектом поворота заливки при наведении.
Кнопка для сайта 10 вариант
Еще один интересный эффект при наведении на кнопку
Кнопка для сайта 11 вариант
Эффект блика на кнопке с использование CSS
Кнопка для сайта 12 вариант
3D кнопка с эффектом разворота по вертикали.
Кнопка для сайта 13 вариант
Кнопка с вертикальным бликом при наведении.
Кнопка для сайта 14 вариант
Изменение цвета кнопки при наведении. Эффект скольжения цвета снизу вверх.
Кнопка для сайта 15 вариант
Кнопка с изменение цвета но только теперь со скольжение по горизонтали.
Кнопка для сайта 16 вариант
Ещё одна кнопка с движение тени при наведении.
Редактирование Размеров и геометрии кнопок.
Часто бывает такое что вам нравится кнопка но она вам не подходит по размеру или по геометрии. допустим вам нужно кнопка большего размера и с более округлыми краями.
Рассмотрим подобный случай на примере первой кнопки.
Вам нужно найти в css коде подобное:
width: 130px;
height: 40px;Это фрагмент кода отвечающий за размер кнопки. Давайте сделаем ее немного шире и длиннее для этого изменим количество пикселей вот так:
width: 150px;
height: 60px;А также можем поменять закругление самой кнопки для этого нужно найти еще вот такой отрывок кода:
border-radius: 5px;и поменять его, допусти на значение 30px
И вот что у нас получилось
Кнопка для сайта 17 вариант с (закруглением)
Кнопки с необычным дизайном
Кнопка для сайта 18 вариант (купить)
Кнопка купить как в Эльдорадо
Кнопка для сайта 19 вариант (скачать)
Кнопка скачать с эффектом подсвечивания.
Кнопка для сайта 20 вариант (как из стекла)
Кнопка как будто бы сделана из стекла подходит только для цветного фона.
Кнопка для сайта 21 вариант (объемная)
Кнопка для сайта 22 вариант (3D)
Интересный вариант 3D CSS кнопки
Кнопка для сайта 23 вариант
Кнопка с бегущими полосами при наведении
Кнопка для сайта 24 вариант
Css код кнопки с появление еще одной окантовки при наведении курсора
Код кнопки расчета с ссылкой на whatsapp
По просьбе человека оставившего комментарий
*Без корректного номера внесенного в код ссылка работать не будет
Заключение:
Вот только небольшой перечень Html и css кодов кнопок на сайт.
Все эти коды можно подстроить под себя так как они легко редактируются вы можете это делать даже не уходя с нашего сайта.
В общем дерзайте. Если будут вопросы пишите в коментариях.
16 ответов
Спасибо! подобрал для себя пару кнопочек на сайт. Процветания вам и успехов!
Не за что! обращайтесь)
В файле CSS “Кнопка 16” ошибка. Пропущена строка. Необходимо писать так:
.btn-16 {
border: none;
color: #000;
z-index: 1;
}
Спасибо. уже поправил)
На смартфоне картинок нет. Тупо
а здесь и нет картинок. только редактор с кодом, и презентация. все отображается нормально, а картинки думаю никому не интересны.
Здравствуйте. Подскажите пожалуйста, как прописать ссылку в кнопке? Пример вот эта НАЖМИКнопка 12 . Я в этом новичок, навыков программирования нет.
Прописываю ссылку на вотсап вот так:
И почему-то между словами Онлайн и Рассчитать, исчезает со временем.
вот посмотрите на такой вариант кода кнопки
< a href="https://api.whatsapp.com/send/?phone=79530880780&text=Здравствуйте%2C+у+меня+есть+вопрос" target="_blank" rel="nofollow noopener ugc"> < button class="custom-btn btn-12">ОнлайнРассчитать< /button>< /a>но пока вы нормальный рабочий телефон не введёте в этот код корректно он работать не будет
вот ссылка на код Код кнопки расчета с ссылкой на whatsapp
я специально добавил этот код в статью для наглядности
спасибо! Очень помогло.
не за что. обращайтесь)
Да не может быть!
СПСБ
И что бы мы делали без вашей блестящей фразы
В этом что-то есть. Спасибо за объяснение. Все гениальное просто.
Это весьма ценное сообщение