Иногда на сайте нужно сделать эффект, который производился от клика по кнопки. Это чтоб при наведение не какого трюка не было, но как только нажали, то происходит оригинальный эффект. Основном идет пример вдавливание, здесь сделаем гораздо проще, и главное, что все будет смотреться великолепно. Где уже сам веб разработчик поставит те значение, которые ему нужны.
Сделаем так, по умолчанию поставим одну палитру цвета, и сам корпус кнопки будет пустым, а точнее под название идет. Но при клике автоматически меняется оттенок, и как раз в это время происходит смена оттенка, где получается эффект клика.
Аналогичный код для примера, используя вкладки 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;
}
Это один из простых и доступных вариантов, который может кардинально изменить функционал на сайте.
Демонстрация
