« CSS кнопки с эффектом наведения и фокусировки »

Описание материала:

Создаем кнопки с эффектом наведения и фокусировки. Наведите курсор мыши на кнопку, чтобы увидеть эффект при наведении, и сфокусироваться на кнопках, нажав Tab, чтобы увидеть эффект фокусировки.

В основном, есть 4 простые кнопки, но когда вы наводите на них курсор, в кнопке появляется значок и цвет. В этом дизайне есть 4 разных вида кнопок для отображения разных журналов, таких как инфо, принято, предупреждение и закрыто. Доступные значки совпадают с сообщениями, что делает его полезным.

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

CSS кнопки с эффектом наведения и фокусировки

Установка:

Подключаем шрифт Cuprum и иконки Awesome:

Код

HTML код:

Код

<button class="ufive-b info"><i class="fas fa-exclamation-circle"></i><span>инфо</span></button>
<button class="ufive-b accepted"><i class="fas fa-check-circle"></i><span>принято</span></button>
<button class="ufive-b warning"><i class="fas fa-exclamation-triangle"></i><span>предупреждение</span></button>
<button class="ufive-b close"><i class="fas fa-times-circle"></i><span>закрыто</span></button>

CSS код:

Код

.ufive-b {
  font-weight: bold;
  font-size: 15px;
  font-family: "Cuprum";
  background-color: transparent;
  border: solid 3px;
  padding: 10px;
  border-radius: 10px;
  margin: 10px 10px;
  display: inline-flex;
  overflow: hidden;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.ufive-b i,
.ufive-b span {
  width: 100%;
  display: block;
  padding: 10px;
  margin: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  text-transform: uppercase;
}
.ufive-b i {
  margin-left: -100%;
  transition: margin-left 300ms ease-in-out;
}
.ufive-b:hover i {
  margin-left: 0;
}
.ufive-b.info {
  color: #1489ff;
  border-color: #1489ff;
}
.ufive-b.info:hover {
  color: #ffffff;
  background-color: #1489ff;
}
.ufive-b.info:focus {
  box-shadow: 0 0 0 0.3rem rgba(20, 137, 255, 0.7);
}
.ufive-b.accepted {
  color: #00ce0d;
  border-color: #00ce0d;
}
.ufive-b.accepted:hover {
  color: #ffffff;
  background-color: #00ce0d;
}
.ufive-b.accepted:focus {
  box-shadow: 0 0 0 0.3rem rgba(0, 206, 13, 0.7);
}
.ufive-b.warning {
  color: #fd9d08;
  border-color: #fd9d08;
}
.ufive-b.warning:hover {
  color: #ffffff;
  background-color: #fd9d08;
}
.ufive-b.warning:focus {
  box-shadow: 0 0 0 0.3rem rgba(241, 218, 25, 0.7);
}
.ufive-b.close {
  color: #ff2323;
  border-color: #ff2323;
}
.ufive-b.close:hover {
  color: #ffffff;
  background-color: #ff2323;
}
.ufive-b.close:focus {
  box-shadow: 0 0 0 0.3rem rgba(255, 35, 35, 0.7);
}

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 417

Теги к материалу: button, css, с эффектом, Focusing, фокусировка, CSS кнопки, html, Наведение, Effect

Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0

uFive.Ru

« CSS кнопки с эффектом наведения и фокусировки »