Этим постом я начинаю подрубрику под названием «Красивые кнопки CSS». Эти CSS кнопки для сайта без сомнения приукрасят любой блог. Причем, реализовать нижеприведенные примеры кнопок сможет любой начинающий блоггер. Они подойдут как для блога, так и для подписной, или продающей страницы, и вообще много для чего.
Формат публикаций будет такой, я публикую исходный код CSS кнопки для сайта, да и любой другой код (в формате рубрики «Волшебство CSS»), так-же даю ссылку на скачивание исходников с html и CSS кодом с пояснениями, Вам только останется запустить html файл в браузере и править исходный CSS файл под свои нужды, после чего просто скопировать и вставить нужную часть отредактированного html и CSS кода на сайт. На усмотрение в ссылке можно прописать target=»_blank» т.е открывать ссылку в новом окне.
— Для тех, кто не уверен как реализовать данные красивые CSS кнопки для сайта, этот небольшой инструктаж:
- Добавить код CSS в конец таблицы стилей (Style CSS)
- В скопированный html код не забыть добавить ссылку.
- В WordPress при публикации страницы или записи html код добавляется в режиме текстового редактора.
При редактировании CSS кнопки для сайта рекомендую использовать простой, но хороший редактор Notepad++
В интернете много обучающих материалов по использованию этого блокнота, так-что проблем с этим возникнуть не должно. Плюс в архиве с исходниками будет ссылка на CSS, html справочник для начинающих.
Красивые кнопки CSS пример №1
html
<a href="ваша ссылка" id="button1">Подписаться</a>
CSS
/* Номер 1 Расширяющаяся кнопка пример */
#button1 {
color: white;
text-decoration: none;
font: 15px/1.5 Helvetica, Arial, sans-serif;
background: #6292c2; /*Расширяющаяся кнопка*/
border: 2px solid #eee;
height: 27px;
width: 100px;
margin: 50px 0 0 50px;
padding: 4px 0 0 7px;
overflow: hidden;
display: block;
/*Переход*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
/*Скругленные углы*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*Градиент*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
#button1:hover {
width: 230px;
}
Красивые кнопки CSS пример №2
html
<a href="ваша ссылка" id="button2">Подписаться</a>
CSS
#button2 {
font: 15px/1.5 Helvetica, Arial, sans-serif;
color: white;
text-decoration: none;
background: #d11717;
color: white;
border: 2px solid #eee;
height: 38px;
width: 125px;
margin: 50px 0 0 50px;
overflow: hidden;
display: block;
text-align: center;
line-height: 38px;
/*Переход*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
/*Скругленные углы*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*Градиент*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Тень*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
}
#button2:hover {
background-color: #63E46E; /*меняеm цвет при наведении */
}CSS кнопки для сайта пример №3
html
<a href="ваша ссылка" id="button3">Подписаться</a>
Стиль кнопки CSS
Обратите внимание, что в этом примере фоном кнопки (background: #d11717 url(/krasivye-knopki-css/&/#8216;textura/textures_1.jpg’); является картинка, он находится в отдельной папке, см. ссылку. Но вы можете подгружать любую понравившуюся вам картинку. Для этого нужно лишь загрузить картинку на хостинг и указать в таблице стилей путь к ней. Как узнать и прописать путь к картинке читайте здесь.
#button3 {
font: 17px/1.5 Helvetica, Arial, sans-serif;
color: white;
text-decoration: none;
background: #d11717 url('/krasivye-knopki-css/textura/textures_1.jpg'); /*крутит фон*/
background-position: 0 0;
color: white;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 22px;
height: 58px;
width: 155px;
margin: 50px 0 0 50px;
overflow: hidden;
display: block;
text-align: center;
line-height: 58px;
/*Переход*/
-webkit-transition: All 0.9s ease;
-moz-transition: All 0.9s ease;
-o-transition: All 0.9s ease;
-ms-transition: All 0.9s ease;
transition: All 0.9s ease;
/*Скругленные углы*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*Тень*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
}
#button3:hover {
background-position: 0px 150px;
}
/*Окончание номер 3*/
/*Номер 4 нажимается*/
#button4 {
background: #5c5c5c;
color: white;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 22px;
height: 58px;
width: 155px;
margin: 50px 0 0 50px;
overflow: hidden;
display: block;
text-align: center;
line-height: 58px;
/*Скругленные углы*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*Тень*/
-webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
/*Градиент*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}CSS кнопки для сайта пример №4
html
<a href="ваша ссылка" id="button4"> Подписаться</a>
Стиль кнопки CSS
#button4 {
color: white;
text-decoration: none;
font: 17px/1.5 Helvetica, Arial, sans-serif;
background: #5c5c5c;
color: white;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 22px;
height: 58px;
width: 155px;
margin: 50px 0 0 50px;
overflow: hidden;
display: block;
text-align: center;
line-height: 58px;
/*Скругленные углы*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*Тень*/
-webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);
/*Градиент*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
#button4:hover {
margin-top: 52px;
/*Тень*/
-webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
/*Градиент*/
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}На этом на сегодня все, не бойтесь экспериментировать со стилями подбирайте наиболее подходящие для своего сайта варианты стилей кнопок.
— Если Вам понравилась статья «Красивые кнопки CSS» жмите кнопочки соц сетей.
— Возникли вопросы? Не стесняйтесь, задавайте их в комментариях, решим проблемку вместе.
Купить винтовые компрессоры высокого давления.
Похожие по Тегам статьи
Создание Video Background HTML 5В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы
Оформление текста в HTML — Выноски CalloutПубликую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…
Системные шрифты, подключение шрифтов к сайтуШрифты — это неотъемлемая и очень важная часть дизайна сайта, подчеркивающая его индивидуальность. В…
Хорошая тема, были бы еще примеры кнопок, цены бы не было статье.
Здравствуй, Андрей, что-бы увидеть примеры надо нажать на кнопку Демо. Прочитав комментарий, подумал что демка не работает, нет, нормально все.Там рядом и исходники можно скачать. Демка моя в отдельном файле. Если делать все демки прям в посту, то таблица стилей станет километровой. Если только создать свою библиотеку стилей и подключать ее где нужно напрямую, через ссылку, или импортировать стили в основную таблу. В след. статье опробую возможные варианты .
Теперь разобрался 🙂
С помощью CSS можно действительно сделать волшебство на блоге Егор! Не зря вы назвали рубрику именно так!
Применил подобный эффект но не для всей кнопки, а только для текста.
P.S Вручаю вашему блогу награду Liebster Blog Award все подробности у меня в статье!
Эти эффекты можно хоть к чему применить, насколько позволяет воображение. Я думаю IE браузером мало кто уже пользуется. Еще подобрал наборчик эффектов, на днях опубликую.
Интересно, что-за награда там у вас? Пойду гляну.