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

Кнопки для сайта с разным эффектом CSS3

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

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

Чтоб изначально сосредоточиться на оригинальном и также уникальном дизайне, где также входит цветовая палитра оттенка, эти вообще по своей конструкций простые кнопки, которые выполнены с помощью CSS, где изначально предлагается анимации зависания, что будет редактироваться, где сами выставите, как видите на портале. По сути они сходящие на обычные кнопки призрака, а точнее прозрачны, где у вас есть цвет границы и нет внутреннего цвета. Но в то время прописан стиль рамки, для каждой кнопки, где оживляет при наведении на ее.

Проверка происходила на работоспособность, где все отлично работает по всем эффектам, где все элементы задействованы.

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

HTML

Код

<div class="zodsatunwes">
  <div class="zamopersanug-1">
  <div class="gukipesaqka gukipesaqka-one">
  <span>ZORNET.RU #1</span>
  </div>
  </div>

  <div class="zamopersanug-2">
  <div class="gukipesaqka gukipesaqka-two">
  <span>ZORNET.RU #2</span>
  </div>
  </div>

  <div class="zamopersanug-3">
  <div class="gukipesaqka gukipesaqka-three">
  <span>ZORNET.RU #3</span>
  </div>
  </div>
</div>

<div class="zodsatunwes">
  <div class="zamopersanug-4">
  <div class="gukipesaqka gukipesaqka-four">
  <span>ZORNET.RU #4</span>
  </div>
  </div>

  <div class="zamopersanug-5">
  <div class="gukipesaqka gukipesaqka-five">
  <span>ZORNET.RU #5</span>
  </div>
  </div>

  <div class="zamopersanug-6">
  <div class="gukipesaqka gukipesaqka-six">
  <span>ZORNET.RU #6</span>
  </div>
  </div>
</div>

CSS

Код

.gukipesaqka {
  position: relative;
  color: white;
  width: 248px;
  height: 63px;
  line-height: 64px;
  transition: all 0.2.5s;
  span {
  transition: all 0.2.5s;
  tranform: scale(1, 1);
  }
}

.gukipesaqka::before, .gukipesaqka::after {
  content: '';
  position: absolute;
  transition: all 0.2.5s;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.gukipesaqka-one::before {
  left: 5px;
  z-index: 1;

  opacity: 0;
  background: rgba(245, 239, 239, 0.17);
  transform: scale(0.1, 1);
}

.gukipesaqka-one:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.gukipesaqka-one::after {
  transition: all 0.3s;
  border: 1px solid rgba(247, 239, 239, 0.38);
}

.gukipesaqka-one:hover::after {
  transform: scale(1, .1);
  opacity: 0;
}

/* gukipesaqka TWO */
.gukipesaqka-two::before, .gukipesaqka-two::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  transition: all 0.4s;
  border: 1px solid rgba(249, 245, 245, 0.45);
}

.gukipesaqka-two:hover::after {
  animation-name: rotatecw;
  animation-duration: 2s;
}
.gukipesaqka-two:hover::before {
  animation-name: rotateccw;
  animation-duration: 3s;
}
.gukipesaqka-two:hover::after, .gukipesaqka-two:hover::before {
  left: 101px;
  width: 73px;

  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotatecw {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

@keyframes rotateccw {
  from {transform: rotate(0deg);}
  to {transform: rotate(-360deg);}
}

/* gukipesaqka THREE */
.gukipesaqka-three::before {
  opacity: 0;
  background: rgba(107, 101, 101, 0.31);
  transform: scale(1, 0.1);
}

.gukipesaqka-three:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.gukipesaqka-three::after {
  transition: all 0.2s;
  border: 1px solid rgba(245, 233, 233, 0.05);
}

.gukipesaqka-three:hover::after {
  transform: scale(1, .1);
  opacity: 0;
}

/* gukipesaqka FOUR */

.gukipesaqka-four:hover span {
  transform: scale(1.2, 1.2);
}

.gukipesaqka-four::before {
  opacity: 0;
  background: rgba(230, 222, 222, 0.07);
  transform: scale(0.1, 0.1);
}

.gukipesaqka-four:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.gukipesaqka-four::after {
  transition: all 0.3s;
  border: 1px solid rgba(243, 233, 233, 0.16);
}

.gukipesaqka-four:hover::after {
  transform: scale(0, 0);
  opacity: 0;
}

/* gukipesaqka FIVE */
.gukipesaqka-five::before {
  transition: transform 0.14s, 0.14s border-radius 0.15s;
  opacity: 0;
  background: rgba(249, 243, 243, 0.16);
  transform: scale(0.1, 0.1);
  border-radius: 50%;
}

.gukipesaqka-five:hover::before {
  opacity: 1;
  transform: scale(1, 1);
  border-radius: 0;
}

.gukipesaqka-five::after {
  transition: all 0.3s;
  border: 1px solid rgba(239, 234, 234, 0.14);
}

.gukipesaqka-five:hover::after {
  opacity: 0;
}

/* gukipesaqka SIX */
.gukipesaqka-six::before {
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.3, 1.3);
}

.gukipesaqka-six:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.gukipesaqka-six::after {
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.gukipesaqka-six:hover::after {
  transform: scale(0, 0);
  opacity: 0;
}

Это отлично настроенный эффект, чтобы получить направление, как пример вправо, где представляется возможность просто настроить без особых усилий. Если вы знаете свой подход к стилям CSS, то должны понять это довольно быстро.

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

14 Июня 2018 Просмотров: 1320 Комментариев: (0)

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

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

Kosten

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