• Страница 1 из 1
  • 1
Форум » Web-Раздел » Верстка веб-сайта » Готовые кнопки с красивым эффектом CSS (Создадим эффект нажатия кнопки при помощи HTML + CSS)
Готовые кнопки с красивым эффектом CSS
Kosten
Дата: Вторник, 2019-11-26, 00:19 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25239
Награды: 57


Вашему вниманию концепция кнопок, что идут в 2 варианта, где мы изначально наблюдаем один оттенок цвета, но пари наведении она кардинально меняется. И где были написаны ключевые слова, там вот как раз становится светлый фон, что очень необычно, если рассматривать такою эффект на темной стилистике сайта. А так кнопки сделаны оригинально, плюс уникальный эффект, который по сути по стандарту идет, но все таки заметно, когда наводим на основу элемента курсором, где эффект преображает кнопку.



HTML

Код
<a class='seukalasde' href='zornet.ru'>ZorNet.Ru</a>
<a class='asukasdemug' href='zornet.ru/forum/'>ZorNet.Ru №1</a>

CSS

Код
a.seukalasde {
  margin-left : auto;
  margin-right : auto;
  width : 375px;
  padding : 10px;
  text-decoration :none;
  font-size : 50px;
  font-family : Helvetica;
  font-weight : bold;
  text-transform : uppercase;
  display :block;
  top : 50px;
  position :relative;
  border-radius : 10px;
  text-align: center;
  transition : all .15s ease-out;
  
  color : rgba(255,255,255,1);
  background : rgba(22,22,22,1);
  box-shadow: inset 0px 0px 0px 10px rgba(22,22,22,1);
}

a.seukalasde:hover {
  color : rgba(22,22,22,1);
  background : rgba(255,255,255,1);
  box-shadow: inset 0px 0px 0px 5px rgba(22,22,22,1);
}

/*=============second==========*/

a.seukalasde {
  margin-left : auto;
  margin-right : auto;
  width : 375px;
  padding : 10px;
  text-decoration :none;
  font-size : 50px;
  font-family : Helvetica;
  font-weight : bold;
  text-transform : uppercase;
  display :block;
  top : 50px;
  position :relative;
  border-radius : 10px;
  text-align: center;
  transition : all .15s ease-out;
color: rgb(253, 251, 251);
    background: rgb(37, 35, 35);
    box-shadow: inset 0px 0px 0px 10px rgb(39, 36, 36);
}

a.seukalasde:hover {
    color: rgb(33, 31, 31);
    background: rgb(243, 237, 237);
    box-shadow: inset 0px 0px 0px 5px rgb(41, 40, 40);
}

/*=============second==========*/

a.asukasdemug {
  margin-top:30px;
  margin-left : auto;
  margin-right : auto;
  width : 424px;
  padding : 10px;
  text-decoration :none;
  font-size : 50px;
  font-family : Helvetica;
  font-weight : bold;
  text-transform : uppercase;
  display :block;
  top : 50px;
  position :relative;
  border-radius : 10px;
  text-align: center;
  transition : all .15s ease-out;
color: rgb(251, 249, 249);
    background: rgb(14, 179, 228);
    box-shadow: inset 0px 0px 0px 10px rgb(16, 180, 228)
}

a.asukasdemug:hover {
    color: rgb(19, 174, 220);
    background: rgb(241, 237, 237);
    box-shadow: inset 0px 0px 0px 5px rgb(10, 175, 224);
}

Для любого веб-сайта за частую акцент часто делается на более сдержанном дизайне, тогда как для креативных индустрий используются более привлекательные кнопки CSS

Демонстрация
Прикрепления: 5259237.jpg(17.6 Kb) · 4317561.zip(2.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Верстка веб-сайта » Готовые кнопки с красивым эффектом CSS (Создадим эффект нажатия кнопки при помощи HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: