• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать кнопку с эффектом нажатия на CSS (Создать эффект при клике кнопок на CSS)
Как сделать кнопку с эффектом нажатия на CSS
Kosten
Дата: Воскресенье, 2019-02-17, 23:06 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24591
Награды: 57


Иногда на сайте нужно сделать эффект, который производился от клика по кнопки. Это чтоб при наведение не какого трюка не было, но как только нажали, то происходит оригинальный эффект. Основном идет пример вдавливание, здесь сделаем гораздо проще, и главное, что все будет смотреться великолепно. Где уже сам веб разработчик поставит те значение, которые ему нужны.

Сделаем так, по умолчанию поставим одну палитру цвета, и сам корпус кнопки будет пустым, а точнее под название идет. Но при клике автоматически меняется оттенок, и как раз в это время происходит смена оттенка, где получается эффект клика.



Аналогичный код для примера, используя вкладки HTML и CSS в средстве просмотра CodePen, на demo странице.

HTML

Код
<button type="button" class="kasopeb kasopeb-dezaxpyv kasopeb-lg nugekad">Zornet.ru</button>

CSS

Код
.kasopeb {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 10px 16px;
}
  
.kasopeb-lg {
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.kasopeb-dezaxpyv {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

.kasopeb-dezaxpyv:hover,
.kasopeb-dezaxpyv:focus,
.kasopeb-dezaxpyv:active,
.kasopeb-dezaxpyv.active,
.open .dropdown-toggle.kasopeb-dezaxpyv {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}

.kasopeb.nugekad {
    background: none;
    padding: 12px 22px;
}
.kasopeb-dezaxpyv.nugekad {
    border: 2px solid #0099cc;
    color: #0099cc;
}
.kasopeb-dezaxpyv.nugekad:hover, .kasopeb-dezaxpyv.nugekad:focus, .kasopeb-dezaxpyv.nugekad:active, .kasopeb-dezaxpyv.nugekad.active, .open > .dropdown-toggle.kasopeb-dezaxpyv {
    color: #33a6cc;
    border-color: #33a6cc;
}
.kasopeb-dezaxpyv.nugekad:active, .kasopeb-dezaxpyv.nugekad.active {
    border-color: #007299;
    color: #007299;
    box-shadow: none;
}

.kasopeb {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.kasopeb:focus, .kasopeb:active:focus, .kasopeb.active:focus {
    nugekad: 0 none;
}

Это один из простых и доступных вариантов, который может кардинально изменить функционал на сайте.

Демонстрация
Прикрепления: 6027597.png(1.6 Kb) · asetun.zip(2.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать кнопку с эффектом нажатия на CSS (Создать эффект при клике кнопок на CSS)
  • Страница 1 из 1
  • 1
Поиск: