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

Оригинальные кнопки CSS3 с уникальным эффектом

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

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

HTML

Код

<div class="zitsarumlom_zorsan">
  <p class="holder">
  <a href="http://zornet.ru/" class="gukerdsamols first_b">Создание сайта на uCoz</a>
  <a href="http://zornet.ru/" class="gukerdsamols secondary_b">Создание сайта на uCoz</a>
  <a href="http://zornet.ru/" class="gukerdsamols third_b">Создание сайта на uCoz</a>
  <a href="http://zornet.ru/" class="gukerdsamols four_b">Создание сайта на uCoz</a>
  </p>
</div>

CSS

Код

html, body, .zitsarumlom_zorsan {
  height: 100%;
}

body {
  background-image: linear-gradient(#06c4cc 0%, #1366d8 100%);
  font-family: sans-serif;
}

.zitsarumlom_zorsan {

  width: 100%;
}

.holder {
  position: absolute;
  top: 50%;
  height: 300px;
  width: 100%;
  margin-top: -170px;
}

a.gukerdsamols:link, a.gukerdsamols:visited {
  position: relative;
  display: block;
  max-width: 280px;
  width:100%;
  margin: 30px auto 0;
  padding: 14px 15px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .08em;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
a.gukerdsamols:link:after, a.gukerdsamols:visited:after {
  content: "";
  position: absolute;
  background: none repeat scroll 0 0 #fff;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 100%;
  z-index: -1;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}
a.gukerdsamols:link:hover, a.gukerdsamols:visited:hover {
  color: #333;
  text-shadow: none;
}
a.gukerdsamols:link:hover:after, a.gukerdsamols:visited:hover:after {
  height: 420%;
}

a.gukerdsamols.first_b:after {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
a.gukerdsamols.secondary_b:after {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
a.gukerdsamols.third_b:after {
  opacity: .5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.gukerdsamols.third_b:hover:after {
  height: 140%;
  opacity: 1;
}
a.gukerdsamols.four_b:after {
  width: 0%;
  border-radius: 50%;
  opacity: .5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.gukerdsamols.four_b:hover:after {
  height: 450%;
  width: 110%;
  opacity: 1;
}

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

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

09 Января 2018 Просмотров: 1325 Комментариев: (0)

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

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

Kosten

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