RUS
ENG

Allperestroika

Главная

I

Искусство

I

Феномены

I

Документы

╳

Главная

Искусство

Феномены

Документы
upbutton pic
  1. Главная ›
  2. Феномены ›
  3. Cтатьи по IT ›
  4. Готовые кнопки html css

Готовые кнопки html css

В данном разделе Вы найдёте коды адаптивных кнопок на HTML и CSS для Вашего сайта. Разумеется Вы можете корректировать параметры CSS под свои нужды, однако, в данном разделе предлагаются УЖЕ работающие и адаптивные под мобильные устройства решения. Напоминаем, что свойста CSS <style> нужно либо выносить в отдельный файл либо ставить внутри самой страницы внутри метатэга <head>. Ну а часть html прописывается внутри метатэга <body>

Кнопка № 1

Прямоугольная кнопка бежевого цвета со скруглёнными краями. При наведении курсора НЕ меняет цвет, содержит в себе пустую ссылку (адрес можно самостоятельно прописать).

Кнопка № 1
CSS

<style>
 
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
 
.ready-button-one {
padding: 10px 20px;background-color:#f5f5dc;color:#000;text-align: center;text-decoration:none;border-radius:5px;font-size: 16px;cursor: pointer;border:2px solid #000;margin:10px;}
 
@media (max-width: 768px) {
.ready-button-one {width:60px;padding: 8px;}
}
</style>

HTML

<a href="#" class="ready-button-one">Кнопка № 1</a>

Кнопка № 2

Прямоугольная кнопка бежевого цвета со скруглёнными краями. При наведении курсора меняет цвет на более светлый, содержит в себе пустую ссылку (адрес можно самостоятельно прописать).

Кнопка № 2
CSS

<style>
 
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
 
.ready-button-two {
padding: 10px 20px;background-color:#f5f5dc;color:#000;text-align: center;text-decoration:none;border-radius:5px;font-size: 16px;cursor: pointer;border:2px solid #000;margin:10px;}
 
.ready-button-two:hover{background-color:#F5DEB3;}
 
@media (max-width: 768px) {
.ready-button-two {width:60px;padding: 8px;}
}
</style>

HTML

<a href="#" class="ready-button-two">Кнопка № 2</a>

Кнопка № 3

Прямоугольная кнопка бежевого цвета. При наведении курсора меняет цвет на более светлый, содержит в себе пустую ссылку (адрес можно самостоятельно прописать).

Кнопка № 3
CSS

<style>
 
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
 
.ready-button-three {
padding: 10px 20px;background-color:#f5f5dc;color:#000;text-align: center;text-decoration:none;font-size:16px;cursor: pointer;border:2px solid #000;margin:10px;}
 
.ready-button-three:hover{background-color:#F5DEB3;}
 
@media (max-width: 768px) {
.ready-button-three {width:60px;padding: 8px;}
}
</style>

HTML

<a href="#" class="ready-button-one">Кнопка № 3</a>

Кнопка № 4

Прямоугольная кнопка бежевого цвета с тенью вокруг контура. При наведении курсора меняет цвет на более светлый, содержит в себе пустую ссылку (адрес можно самостоятельно прописать).

Кнопка № 4
CSS

<style>
 
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
 
.ready-button-four {
padding: 10px 20px;background-color:#f5f5dc;color:#000;text-align: center;text-decoration:none;font-size:16px;cursor: pointer;border:2px solid #000;box-shadow: 0 1px 4px rgba(0, 0, 0, 2);margin:10px;}
 
.ready-button-four:hover{background-color:#F5DEB3;}
 
@media (max-width: 768px) {
.ready-button-four {width:60px;padding: 8px;}
}
</style>

HTML

<a href="#" class="ready-button-four">Кнопка № 4</a>

 

 

  1. Главная ›
  2. Феномены ›
  3. Cтатьи по IT ›
  4. Готовые кнопки html css

Copyright © Михаил Жарков