Подборка стильных CSS-кнопок, которые вы можете бесплатно использовать на своем сайте. Все кнопки созданы с помощью чистого CSS, не требуют изображений и легко настраиваются.
html
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Красивые CSS-кнопки</title> <style> /* Базовые стили для демонстрации */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; color: #333; } h1, h2 { text-align: center; color: #2c3e50; } .button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px; } .button-group { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } .button-group h3 { margin-top: 0; color: #3498db; } /* Стили для кнопок */ .btn { display: inline-block; padding: 12px 24px; margin: 10px; border: none; border-radius: 5px; background-color: #3498db; color: white; font-size: 16px; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; } /* 1. Простая кнопка с тенью */ .btn-shadow { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .btn-shadow:hover { transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } /* 2. Кнопка с градиентом */ .btn-gradient { background-image: linear-gradient(to right, #ff7e5f, #feb47b); } .btn-gradient:hover { background-image: linear-gradient(to right, #feb47b, #ff7e5f); transform: scale(1.05); } /* 3. Кнопка с обводкой */ .btn-outline { background-color: transparent; border: 2px solid #3498db; color: #3498db; } .btn-outline:hover { background-color: #3498db; color: white; } /* 4. Кнопка со скругленными углами */ .btn-rounded { border-radius: 30px; background-color: #2ecc71; } .btn-rounded:hover { background-color: #27ae60; padding: 12px 30px; } /* 5. Кнопка с эффектом нажатия */ .btn-press { box-shadow: 0 5px 0 #2c3e50; } .btn-press:hover { transform: translateY(2px); box-shadow: 0 3px 0 #2c3e50; } /* 6. Кнопка с анимацией */ .btn-animate { position: relative; overflow: hidden; z-index: 1; } .btn-animate:after { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.2); transition: all 0.3s ease; z-index: -1; } .btn-animate:hover:after { left: 0; } /* 7. Кнопка с иконкой */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; } .btn-icon span { margin-left: 8px; } /* 8. Кнопка-призрак */ .btn-ghost { background-color: transparent; color: #9b59b6; border: 2px solid #9b59b6; } .btn-ghost:hover { background-color: #9b59b6; color: white; } /* 9. Кнопка с двойной обводкой */ .btn-double-border { background-color: transparent; color: #e74c3c; border: 2px solid #e74c3c; position: relative; } .btn-double-border:before { content: ""; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border: 2px solid #e74c3c; opacity: 0; transition: all 0.3s ease; } .btn-double-border:hover:before { opacity: 1; top: -4px; left: -4px; right: -4px; bottom: -4px; } /* 10. Кнопка с блочным эффектом */ .btn-block { letter-spacing: 1px; background-color: #34495e; } .btn-block:hover { letter-spacing: 2px; } </style> </head> <body> <h1>Красивые бесплатные кнопки для сайта</h1> <p style="text-align: center;">Просто скопируйте код и вставьте на свой сайт. Все кнопки адаптивны и хорошо выглядят на любых устройствах.</p> <div class="button-grid"> <div class="button-group"> <h3>Простая кнопка с тенью</h3> <button class="btn btn-shadow">Нажать</button> <p>Идеальна для большинства сайтов</p> </div> <div class="button-group"> <h3>Кнопка с градиентом</h3> <button class="btn btn-gradient">Градиент</button> <p>Привлекает внимание посетителей</p> </div> <div class="button-group"> <h3>Кнопка с обводкой</h3> <button class="btn btn-outline">Контур</button> <p>Современный минималистичный стиль</p> </div> <div class="button-group"> <h3>Скругленная кнопка</h3> <button class="btn btn-rounded">Скругленная</button> <p>Мягкий и дружелюбный вид</p> </div> <div class="button-group"> <h3>Кнопка с эффектом нажатия</h3> <button class="btn btn-press">Нажми меня</button> <p>Создает ощущение реальной кнопки</p> </div> <div class="button-group"> <h3>Анимированная кнопка</h3> <button class="btn btn-animate">Анимация</button> <p>Плавные переходы при наведении</p> </div> <div class="button-group"> <h3>Кнопка с иконкой</h3> <button class="btn btn-icon">👉 <span>Иконка</span></button> <p>Визуально показывает действие</p> </div> <div class="button-group"> <h3>Кнопка-призрак</h3> <button class="btn btn-ghost">Призрак</button> <p>Стильный полупрозрачный эффект</p> </div> <div class="button-group"> <h3>Двойная обводка</h3> <button class="btn btn-double-border">Двойная рамка</button> <p>Сложный визуальный эффект</p> </div> <div class="button-group"> <h3>Блочный эффект</h3> <button class="btn btn-block">Блочная</button> <p>Изменение межбуквенного интервала</p> </div> </div> <div style="margin-top: 50px; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"> <h2>Как использовать эти кнопки?</h2> <p>Просто скопируйте HTML и CSS код для понравившейся кнопки. Вы можете изменять цвета, размеры и другие параметры, чтобы они идеально подходили к дизайну вашего сайта.</p> <p>Все кнопки:</p> <ul> <li>Адаптивны и отлично выглядят на мобильных устройствах</li> <li>Не требуют JavaScript или изображений</li> <li>Бесплатны для использования в любых проектах</li> <li>Легко настраиваются под ваш дизайн</li> </ul> </div> </body> </html>
Все кнопки полностью адаптивны и будут отлично выглядеть на мобильных устройствах. Вы можете свободно изменять и использовать их в своих проектах.