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

Оригинальная кнопка с hover-эффектом на CSS3

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

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

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

Рассмотрим цветовую гамму, как реально поле установки станет.

Зеленый оттенок с красным:

Зеленая кнопка на CSS3

Синий оттенок с элементами красного цвета:

Синяя кнопка при помощи CSS

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

HTML

Код

<div class="brusage-lovtkan">
<a href="http://zornet.ru">ZORNET.RU</a>
</div>

CSS

Код

.brusage-lovtkan {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: auto;
  max-width: 247px;
  margin: 29px auto;
  position: relative;
  padding: 8px;
  text-align: center;
}
.brusage-lovtkan:before,
.brusage-lovtkan:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 100%;
  border: 2px solid red;
  transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  box-shadow: inset red -1px 0 0, inset red -2px 0 0, inset red -3px 0 0, inset red -4px 0 0;
  z-index: 50;
  transition: all .5s ease-in-out;
}
.brusage-lovtkan:hover:before {
  transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}
.brusage-lovtkan:after {
  transform: rotate(-170deg);
  -ms-transform: rotate(-170deg);
  -webkit-transform: rotate(-170deg);
}
.brusage-lovtkan:hover:after {
  transform: rotate(-175deg);
  -ms-transform: rotate(-175deg);
  -webkit-transform: rotate(-175deg);
}
.brusage-lovtkan a, .brusage-lovtkan label, .brusage-lovtkan button, .brusage-lovtkan input[type=button], .brusage-lovtkan input[type=submit] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1000;
  display: block;
  width: 100%;
  min-width: 198px;
  margin: 0 auto;
  padding: .3em .3em .3em .3em;
  font-size: 23pt;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  font-kerning: auto;
  text-decoration: none;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
  background: #1453a5;
  background: -moz-linear-gradient(top, #6a1 0%, #3d6c04 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a71a5), color-stop(100%,#124e88));
  background: -webkit-linear-gradient(top, #1a629a 0%,#134f8e 100%);
  background: -o-linear-gradient(top, #6a1 0%,#3d6c04 100%);
  background: -ms-linear-gradient(top, #6a1 0%,#3d6c04 100%);
  background: linear-gradient(to bottom, #1954a0 0%,#0a3665 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a1', endColorstr='#3d6c04',GradientType=0 );
  color: #fff;
  text-shadow: #04284c 1px 1px 0;
  border: 1px solid #0d528a;
  border-bottom-color: #04234c;
  border-radius: 3px;
  box-shadow: inset #3172ce 0 -5px 15px, inset #77afe0 0 1px 1px, white 0 1px 0, white 1px 0 0, white -1px 0 0, white 0 -1px 0, white 0 2px 0, white 2px 0 0, white -2px 0 0, white 0 -2px 0, white 2px 2px 0, white 2px -2px 0, #f3ebeb -2px -2px 0, white -2px 2px 0, rgba(0,0,0,.15) 0px 3px 5px;
}
.greenButton a:hover,
.greenButton a:focus,
.greenButton label:hover,
.greenButton label:focus,
.greenButton button:hover,
.greenButton button:focus,
.greenButton input[type=button]:hover,
.greenButton input[type=button]:focus,
.greenButton input[type=submit]:hover,
.greenButton input[type=submit]:focus {
  background: #6d4;
  color: white;
  background: -moz-linear-gradient(top, #6d4 0%, #3d6c04 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d4), color-stop(100%,#3d6c04));
  background: -webkit-linear-gradient(top, #6d4 0%,#3d6c04 100%);
  background: -o-linear-gradient(top, #6d4 0%,#3d6c04 100%);
  background: -ms-linear-gradient(top, #6d4 0%,#3d6c04 100%);
  background: linear-gradient(to bottom, #6d4 0%,#3d6c04 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a3', endColorstr='#3d6c04',GradientType=0 );
  box-shadow: inset #064 0 -5px 15px, inset #8e8 0 1px 1px, rgba(0, 255, 75, 0.5) 0 0 10px, white 0 1px 0, white 1px 0 0, white -1px 0 0, white 0 -1px 0, white 0 2px 0, white 2px 0 0, white -2px 0 0, white 0 -2px 0, white 2px 2px 0, white 2px -2px 0, white -2px -2px 0, white -2px 2px 0, rgba(0,0,0,.15) 0px 1px 1px;
}
.brusage-lovtkan a:active,
.brusage-lovtkan label:active,
.brusage-lovtkan button:active,
.brusage-lovtkan input[type=button]:active,
.brusage-lovtkan input[type=submit]:active {
  background: #3d6c04;
  border: 1px solid #005822;
  border-bottom-color: #052;
  box-shadow: inset #040 0 -5px 15px, inset #8e8 0 1px 1px, white 0 1px 0, white 1px 0 0, white -1px 0 0, white 0 -1px 0, white 0 2px 0, white 2px 0 0, white -2px 0 0, white 0 -2px 0, white 2px 2px 0, white 2px -2px 0, white -2px -2px 0, white -2px 2px 0;
}

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

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

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

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

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

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

Kosten

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