ZorNet.Ru — сайт для вебмастера » HTML и CSS » Цветные кнопки со значками от Font Awesome

Цветные кнопки со значками от Font Awesome

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

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

Установка:

HTML

Код

CSS

Код

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css');
  /* Base */
  * {
  box-sizing: border-box;
  }

  body {
  background: darkslategrey;
  margin: 2rem 0;
  }

  /* Headers */
  h1, h5, p {
  text-align: center;
  }

  h1 {
  color: khaki;
  margin-top: 1em;
  letter-spacing: 1.4px;
  line-height: 1.2;
  }

  h5 {
  color: linen;
  }

  p {
  color: darkgrey;
  }

  /* osnova_karkasa */
  .osnova_karkasa {
  width: 90%;
  max-width: 900px;
  margin: 3em auto;
  text-align: center;
  }

  /* sambled */
  .sambled {
  margin: 1.5em 3em;
  width: 6.4em;
  height: 6.4em;
  border-radius: 20%;
  display: inline-block;
  top: 0;
  transition: all 0.2s ease;
  box-shadow: 8px 10px 12px 3px rgba(0, 0, 0, 0.43);
  }

  .rounded {
  width: 70px;
  height: 70px;
  background: white;
  position: absolute;
  margin: 15px 16px auto;
  z-index: 10;
  border-radius: 30%;
  box-shadow: 8px 8px 8px 2px rgba(0, 0, 0, 0.23);
  }
  .rounded i.fab {
  font-size: 2.6em;
  margin-top: 16px;
  }

  /* Colors */
  .sapphirine {
  background: #0c7be6;
  color: #0ab7f1;
  }

  .mandarine {
  background: #e28718;
  color: #ef9e0a
  }

  .purchase {
  background: #debf1a;
  color: #e2c213;
  }

  .red {
  background: #ef1616;
  color: #e81212;
  }

  .zanedsa {
  background: #6a37d2;
  color: #607386;
  }

  .metals {
  background: #88b925;
  color: #285050;
  }

  .crimson {
  background: #d4193c;
  color: #9c1919;
  }

  .lasderas {
  background: #3978ad;
  color: #eac913;
  }

  .basuosa {
  background: #ef59a4;
  color: #c15a7c;
  }

  .rebecca {
  background: #542880;
  color: #552982;
  }

  .kigsadlas {
  background: #d8d0d0;
  color: #f14c10;
  }

Как можно заметить, что здесь представлены все оттенки цвета, но у кого возможно не совпадает с основой стиля на сайте, то все правим или выставляем в CSS, заданную гамму цвета.

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

03 Января 2021 Загрузок: 1 Просмотров: 938 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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