ZorNet.Ru — сайт для вебмастера » HTML и CSS » Потрясающая кнопка с градиентом на CSS

Потрясающая кнопка с градиентом на CSS

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

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

1. Так изначально кнопка идет:

2. Здесь уже видно небольшие изменение, где внизу тени установлены:

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

HTML

Код

<div class="vukasogure-atingasam">
<a href="#" class="sorizonta-bruklesa"><span>ZORNET.RU<span></span></span></a>
</div>

CSS

Код

.vukasogure-atingasam {
  position: relative;
  left: 87%;
  margin-top: 67px;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.sorizonta-bruklesa {
  display: block;
  height: 49px;
  width: 195px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #f9f8f8;
  font-size: 15px;
  text-align: center;
  box-shadow: 0px 5px 9px rgba(56, 52, 52, 0.38), 0px 8px 29px -14px rgba(14, 14, 14, 0.51);
  border-radius: 3px;
  border: 1px solid #e2e9f7;
}

.sorizonta-bruklesa:after {
  position: absolute;
  content: '';
  display: inline-block;
  background: #2f9dd2;
  background: linear-gradient(45deg,#309ed2 0%,#4960d2 25%,#9035b1 51%,#e4236a 100%);
  height: 50px;
  width: 372px;
  z-index: -1;
  -webkit-transform: translateX(-280px);
  transform: translateX(-280px);
  transition: -webkit-transform 400ms ease-in;
  transition: transform 500ms ease-in;
  transition: transform 500ms ease-in,-webkit-transform 500ms ease-in;
}

.sorizonta-bruklesa:hover:after {
-webkit-transform:translateX(-200px);
transform:translateX(-200px)
}

.sorizonta-bruklesa span {
  color: #f7f5f5;
  position: relative;
  top: 17px;
}

Вы можете ее поставить на различные функций, это под кнопку скачать или перейти по станицам.

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

18 Августа 2018 Просмотров: 1328 Комментариев: (0)

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

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

Kosten

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