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

Красивые кнопки градиента для сайта на CSS3

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

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

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

HTML

Код

<a class="karvunim zornesan" href="http://zornet.ru">Чёрный</a>
<a class="karvunim zornesan bigrounded" href="http://zornet.ru">Закругленный</a>
<a class="karvunim zornesan medium" href="http://zornet.ru">Средний</a>
<a class="karvunim zornesan small" href="http://zornet.ru">Маленький</a>

CSS

Код

.karvunim {
  display: inline-block;
  zoom: 1;
  display: inline-block;
  vertical-align: baseline;
  margin: 5px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  padding: .5em 1.5em .5em;
  text-shadow: 0 1px 1px rgba(23, 21, 21, 0.42);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(19, 18, 18, 0.29);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.29);
}
.karvunim:hover {
  text-decoration: none;
}
.karvunim:active {
  position: relative;
  top: 1px;
}
.bigrounded {
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.medium {
  font-size: 12px;
  padding: .4em 1.5em .42em;
}
.small {
  font-size: 11px;
  padding: .2em 1em .275em;
}

/* стили цвета кнопок
---------------------------------------------- */

/* черный */
.zornesan {
  color: #d7d7d7;
  border: solid 1px #333;
  background: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
  background: -moz-linear-gradient(top, #666, #000);
  background: -ms-linear-gradient(top, #666, #000);
  background-image: -o-linear-gradient(top,rgb(102,102,102),rgb(0,0,0));
}

.zornesan:hover {
  background: #000;
}

Оттенок здесь вы сами можете выставить, тот который вам нужен.

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

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

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

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

Kosten

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