• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Эффект наведения клика для кнопочного меню (Оригинальные кнопки, которые выполнены вертикальном меню)
Эффект наведения клика для кнопочного меню
Kosten
 		Среда, 14 Апреля 2021, 12:55 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44492
Награды: 70
« 557 »
Также есть такой вариант кнопок, что больше схоже на вертикальное меню. Но здесь при нажатие появляется цветовая гамма на данной категорий, где производился клик. И после того, как вы переключаете на другую категорию, то гамма цвета переходит далее под нажатие клика.



HTML


CSS

Код
body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

p {
    font-family: sans-serif;
}

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.twitter-nav {
    display: flex;
    flex-direction: column;
}

button {
    height: 60px;
    width: max-content;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 19px;
    font-weight: 600;
    color: #111;
    border: none;
    background: transparent;
    transition: 300ms;
}

button span {
    margin: 20px;
    margin-right: 30px;
}

button:nth-child(3) svg path {
    stroke: none;
}

button:nth-child(3) svg {
    fill: #111;
}

button svg {
    margin-left: 10px;
    width: 35px;
    fill: none;
}

button svg path {
    stroke: #111;
    stroke-width: 1px;
    transition: 300ms;
}

.logo {
    width: 50px;
    height: 50px;
}

.logo svg {
    fill: #1da1f2;
}

.logo svg path {
    stroke: none;
}

button:hover {
    background: #def2ff;
    color: #1da1f2;
}

button:hover svg path {
    stroke: #1da1f2;
}

.logo:hover svg path {
    stroke: none;
}

button:nth-child(3):hover svg {
    fill: #1da1f2;
}

button:nth-child(3):hover svg path {
    stroke: none;
}

button:focus {
    outline: none;
    color: #1da1f2;
}

button:focus svg{
    fill: #1da1f2;
}

button:focus svg path {
    stroke: none;
}


Демонстрация
Прикрепления: 1238777.png (26.1 Kb) · twitter-nav.zip (5.5 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Эффект наведения клика для кнопочного меню (Оригинальные кнопки, которые выполнены вертикальном меню)
  • Страница 1 из 1
  • 1
Поиск: