Меняется цвет кнопки при наведении CSS

Последнее обновление на 29.01.2023

Меняется цвет кнопки при наведении CSS

CSS код

.button{
display: inline-block;
cursor: pointer; 
font-size:26px;
text-decoration:none;
padding:13px 15px; 
color:#ffffff;
background:#bf8c34;
border-radius:26px;
border:4px solid #019485;
}

.button:hover{
background:#605df0;
color:#ffffff;
border:4px solid #0c2d45;
transition: all 0.2s ease;
}

HTML код

<a class="button" href="link"   title="Нажми на меня">Наведи и цвет поменяется</a>

Ещё пример

CSS код

.button1 {
  border: none;
  color: white;
  font-size: 24px;
  margin: 2px 1px;
  padding: 14px 26px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button-new {
  background-color: white; 
  color: black;
  border-radius: 12px;
  border: 3px solid orange;
}

.button-new:hover {
  background-color: orange;
  color: white;
}

HTML код

<button class="button1 button-new">Нажми</button>

Пример работы кнопки — изменение цвета CSS

CSS код для отключения кнопки

.button-disabled {
opacity: 0.5;
curisor: not-allowed;
}

CSS код для выравнивания кнопок по горизонтали

.button-horizont {
    float: left;
}

CSS код для выравнивания кнопок по вертикали

.button-vertical {
    display: block;
}

CSS стиль для кнопки disabled

button:disabled,
button[disabled]{
  /* Ваш стиль */
}

<button disabled> button disabled </button>

Пример кнопка с тенью

CSS код

.button-shadow {
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .5),
                inset -2px -2px 3px rgba(0, 0, 0, .5);
}

.button-shadow:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .5),
                inset 2px 2px 3px rgba(0, 0, 0, .5);
}

HTML код

<button class="button-shadow" type="button">Кнопка с тенью</button>

Кнопка c тенью пример работы