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

Красивые кнопки фонового эффекта на CSS3

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

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

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

Давайте рассмотрим все четыре эффекта:

1. Отвечает за фактор появление сверху;

Стиль кнопки CSS: драпированный фоновый эффект

2. Также сверху, только по другой траекторий;

3. Здесь появление с правой стороны;

4. Все аналогично, то только с левой появление будет;

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

HTML

Код

<button class="katbazolnagem">ZORNET.RU #1</button>
<button class="katbazolnagem vtoryznakedog">ZORNET.RU #2</button>
<button class="katbazolnagem trenuksazqebun">ZORNET.RU #3</button>
<button class="katbazolnagem laxnezakiped">ZORNET.RU #4</button>

CSS

Код

.katbazolnagem {
  color: #504e4e;
  text-shadow: 0 1px 0 #f1e6e6;
  outline: none;
  background: transparent;
  border-radius: 3px;
  border-width: 0;
  padding: 7px 9px;
  font-weight: bold;
  font-size: 17px;
  text-transform: uppercase;
  line-height: 2;
  position: relative;
  display: inline-block;
  margin-right: 17px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  border: 2px solid #c2c4c7;
  box-shadow: 0px 3px 9px rgba(109, 104, 104, 0.31), 0px 10px 30px -15px rgba(23, 22, 22, 0)
}

.katbazolnagem:before, .katbazolnagem:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0 0 29% 29%/47%;
  background: #25b3e0;
  left: 0;
  top: -100%;
  z-index: -1;
  transition: all .5s;
}

.katbazolnagem:before{
  background: #eee; /* button default background color */
  z-index: -2;
  top: 0;
  border-radius: 0;
}

.katbazolnagem:hover:after{
  top: 0;
  border-radius: 0;
  transition: top .5s, border-radius .5s .3s;
}

.drapecenter:after{
  border-radius: 50%;
}

.trenuksazqebun:after{
  top: 0;
  left: -100%;
  border-radius: 0 18% 18% 0/75%;
}

.trenuksazqebun:hover:after{
  left: 0;
  transition: left .5s, border-radius .1s .5s;
}

.laxnezakiped:after{
  top: 0;
  left: 100%;
  border-radius: 19% 0 0 19%/79%;
}

.laxnezakiped:hover:after{
  left: 0;
  transition: left .5s, border-radius .1s .5s;
}

Этот стиль кнопки можно применять к разноплановым тематическим сайтам, в зависимости от ваших потребностей.

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

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

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

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

Kosten

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