ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация кнопок с эффектами на CSS3

Анимация кнопок с эффектами на CSS3

Еще одна великолепная подборка кнопок, которые выволочены на чистом стиле CSS, где имеют индивидуальный эффект у каждого элемента дизайн. Хотите добавить некоторые интересные эффекты зависания к вашим призрачным кнопкам. Эти кнопки заполняются очень чисто, легко манипулируют и совершенствуются для любого сайта. Вы можете изменять цвет фона и текста вместе с внутренними значками. Они в основном являются конечной коллекцией эффектов зависания кнопок. Вы можете создать потрясающие материалы с помощью стилей дизайна материала Google.

Некоторые из моих любимых функций - взаимодействие и микро интерпретации, первоначально разработанные для телефонов Android. Вы можете увидеть некоторые из этих анимаций в этих призрачных кнопках. Всякий раз, когда вы наводите на корпус, они автоматически заполняют оригинальным элементом, на основе того, который вы подберете под эффект. Все сделано на чистой стилистике CSS, где не применяется JavaScript, что идет в плюс, это будет всего небольшая, можно сказать незаметная нагрузка на страницу.

Я абсолютно рекомендую этот пакет для любых разработчиков, которые хотят красивое множество кнопок. Также не забываем, если увеличиваем шрифт, значат нужно автоматически увеличеть саму кнопку, так как эффект не порлностью раскроется.

Приступаем к установке:

HTML

Код

<button class="aimprovement">ZorNet.Ru</button>
<button class="milasompareg">ZorNet.Ru #1</button>
<button class="sugestsan">Скрипты</button>
<button class="strongeroting"> </button>
<button class="strongeroting left"> </button>
<button class="low-hanging">Шаблоны</button>

CSS

Код

button {
  position: relative;
  height: 45px;
  width: 150px;
  margin: 9px 8px;
  padding: 7px 7px;
  font-weight: 700;
  font-size: 14.7px;
  letter-spacing: 1px;
  color: #2c3e4c;
  border: 2px #23243e solid;
  border-radius: 59px;
  text-transform: uppercase;
  outline: 0;
  overflow: hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition: 0.08s ease-in;
  -o-transition: 0.08s ease-in;
  -ms-transition: 0.08s ease-in;
  -moz-transition: 0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
}

.aimprovement:hover {
  color: #fbf7f7;
}

.aimprovement:before {
  content: "";
  position: absolute;
  background: #24262d;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.09s ease-in;
}

.aimprovement:hover:before {
  top: 0;
}

.low-hanging:before{
  content:"→";
  position:absolute;
  color:#32333a;
  left: 88%;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
}

.low-hanging:hover:before{
  left:91%;
  opacity:1;
}

.low-hanging:hover {
  border: 0px #fff solid;
  -webkit-transform: scale(1.04,1.04);
  -webkit-transition: border 0.3s ease-out;
  -webkit-transition: transform 250ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.sugestsan{
  text-align:left;
  padding-left:17px;
}

.sugestsan:before{
  content:"→";
  position:absolute;
  color:#383736;
  left: 83%;
  opacity: 0;
  -webkit-transition: all 250ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.sugestsan:hover:before{
  left:84%;
  opacity:1;
}

.sugestsan :hover {
  width:170px;
}

.strongeroting:after{
  content:"Скрипты";
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  text-align:center;
  -webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.strongeroting:before {
  content:"Перейти →";
  height:100%;
  width:100%;
  position:absolute;
  color:#383736;
  left:-100%;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.strongeroting:hover{
  background:#383736;
}

.strongeroting:hover:before{
  left:0;
  opacity:1;
  color:#fff;
}
.strongeroting:hover:after{
  left:100%;
  opacity:0;
}

.strongeroting.left:hover{
  background:none;
}

.strongeroting.left:before {
  left:100%;
  color:#383736;
  -webkit-transition: all 425ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.strongeroting.left:hover:before{
  left:0;
}

.milasompareg{
  -webkit-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
}

.milasompareg:before{
  position:absolute;
  content:"";
  background: url(https://f.cl.ly/items/3H3A0D1N281a2T280F3o/heist.milasompareg) no-repeat center center;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  opacity:0;
  -webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

.milasompareg:after {
  content: "";
  position: absolute;
  background: #a27718;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -2;
  -webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}
.milasompareg:hover {
  color: #fdfdfd;
  border: 0px #715008 solid;
}
.milasompareg:hover:before {
  opacity: .8;
}
.milasompareg:hover:after {
  top: 0;
}

Смотрим на класс, что и какой кнопке он привязан, и берем стили под его названием, что отвечает за эффект.

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

12 Июля 2018 Просмотров: 1071 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 12 Июля 2018 23:01¹ 0 Некоторые знаки не появились, как &-nbsp, что перейдя на демонстрацию, можно там все взять, также ЗДЕСЬ представлена еще одна demo страница со всеми знаками.