Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Вид кнопки с градиентом и тенью на чистом CSS

Дата добавления: 14.04.2017 - 03:11
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 189
Количество комментариев: 0
Размер файла: 2.9Kb
Рейтинг материала: 5.0 / 2
Вид кнопки с градиентом и тенью на чистом CSS
рейтинг 5.0
/
голосов 2
Совсем недавно в моде было использовать вид кнопок обычным плоским и легким стиле FLAT. В принципе, это и не устаревает и еще до сих пор является актуальным. Но все же, давайте обратим внимания, что начинает прорисовываться новый стиль в WEB. И вскоре всего, он станет очень даже актуальным. Теперь по-тихоньку на смену стиля FLAT приходит новый стиль, который все также имеет легкий плоский стиль, но уже с применением легких и сочных градиентных фонов как для кнопок, так и для других различных элементов дизайна. Ведь согласитесь, смотрится очень даже хорошо и красиво!

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

HTML
Код
<button class="button1">Вид кнопки 1</button>
<button class="button2">Вид кнопки 2</button>
<button class="button3">Вид кнопки 3</button>
<button class="button4">Вид кнопки 4</button>


CSS
Код
button {
  margin: 2em auto;
  display: block;
  -webkit-appearance: none;
  border: 6px solid rgba(255, 255, 255, 0.45);
  border-radius: 50px;
  padding: 1em 3em;
  background-repeat: no-repeat;
  background-size: 100%;
  background-clip: padding-box;
  position: relative;
  color: #FFF;
  cursor: pointer;
  }
   
  button:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 50px;
  z-index: -1;
  filter: blur(14px);
  }
   
  button:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 50px;
  z-index: -1;
  filter: blur(14px);
  }
   
  .button1 {
  background-image: linear-gradient(90deg, #7b81ec, #3bd1d3);
  }
   
  .button1:before {
  background-image: linear-gradient(90deg, #7b81ec, transparent);
  }
   
  .button1:after {
  background-image: linear-gradient(90deg, transparent, #3bd1d3);
  }
   
  .button2 {
  background-image: linear-gradient(90deg, #fa80d2, #fed757);
  }
   
  .button2:before {
  background-image: linear-gradient(90deg, #fa80d2, transparent);
  }
   
  .button2:after {
  background-image: linear-gradient(90deg, transparent, #fed757);
  }
   
  .button3 {
  background-image: linear-gradient(90deg, #8ce0f1, #79f391);
  }
   
  .button3:before {
  background-image: linear-gradient(90deg, #8ce0f1, transparent);
  }
   
  .button3:after {
  background-image: linear-gradient(90deg, transparent, #79f391);
  }
   
  .button4 {
  background-image: linear-gradient(90deg, #525a69, #898dda);
  }
   
  .button4:before {
  background-image: linear-gradient(90deg, #525a69, transparent);
  }
   
  .button4:after {
  background-image: linear-gradient(90deg, transparent, #898dda);
  }


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.