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

Розовая кнопка с эффектом при помощи CSS

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

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

Здесь идет по умолчанию:

Стилизация кнопки на CSS

В рабочем виде:

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

HTML

Код

<div class="zatumil_teskemda">
  <a href="http://zornet.ru/">
  zornet.ru
  </a>
</div>

CSS

Код

.zatumil_teskemda{
  display:table-cell;
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: #e4e2e2;
  margin: auto;
  width: 357px;
  display: inline-block;
  line-height: 70px;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: 3px;
  border-radius: 2px;
  text-transform: uppercase;
  background-color: #b50d66;
  box-shadow: 0px 12px 17px -6px rgba(162, 5, 88, 0.65);
  transition: all 0.4s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  position: relative;
}

a:hover {
  background-color: #ca0c6fcc;
  box-shadow: 0px 19px 20px -8px rgba(160, 13, 90, 0.5);
  transform: scale(1.02,1.02);
}

  a:active{
  background-color: #ab005a;
  box-shadow: 0px 11px 19px -4px rgba(199, 0, 105, 0.90);
  transform: scale(0.95,0.95);
}

Если будите менять цвет, то также нужно под вашу гамму изменить тень, что будет появляется.

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

21 Марта 2018 Просмотров: 1784 Комментариев: (0)

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

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

Kosten

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