Красивые кнопки для сайта. Часть 2

Опубликовано: 15 августа 2017 Обновлено: 22 декабря 2020 4 комментария

Кнопки на сайте являются привычными элементами веб-дизайна, мы сталкиваемся с ними каждый день. Используя возможности CSS3, можно создавать красивые и оригинальные кнопки, которые помогут повысить кликабельность и конверсию. При разработке дизайна в первую очередь нужно думать о том, как будет выглядеть та или иная кнопка в контексте сайта.

Основные принципы, которые нужно учитывать при создании кнопок

  • главные кнопки делайте насыщенными и яркими, а все остальные — контрастными (например, если фон сайта белый, не окрашивайте кнопки светло-серыми или бежевыми тонами);
  • для привлечения внимания делайте кнопки большими;
  • добавляйте мелкие детали и штрихи, например, иконки, описывающие совершаемое действие, или стрелки;
  • правильно подписывайте кнопки;
  • создавайте дополнительные стили, указывающие на текущее состояние кнопки.

Взяв за основу предложенные варианты, вы сможете создать уникальные кнопки, которые будут соответствовать тематике вашего сайта.

Перейти на страницу с примерами

Пример 1. «Двойные» кнопки

<a href="" class="double-btn">Кнопка</a>
.double-btn {
   position: relative;
   display: inline-block;
   padding: 10px 30px;
   margin-right: 20px;
   text-decoration: none;
   font-family: 'Comfortaa', cursive;
   font-size: 20px;
   line-height: 1;
   letter-spacing: 3px;
   color: #E8EFF1;
   text-shadow: -2px -1px #F17555;
   background: #1E1958;
   transition: .3s;
}
.double-btn:hover {
   text-shadow: none;
}
.double-btn:after {
   content: "";
   position: absolute;
   height: 105%;
   width: 105%;
   z-index: -1;
   left: -4px;
   top: -1px;
   background: #F17555;
   transform: skewY(2deg);
   transition: .3s;
}
.double-btn:hover:after {
   transform: none;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
}

Пример 2. Открывающиеся кнопки

<a href="" class="transform-button"><span>Войти на сайт</span></a>
.transform-button {
   position: relative;
   display: inline-block;
   text-decoration: none;
   padding: 10px 30px;
   margin-right: 20px;
   border: 1px solid #68E5F7;
   background: transparent;
   color: #fff;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   perspective: 500px;
   background: white;
   transition: .3s;
}
.transform-button:last-of-type {
   margin-right: 0;
}
.transform-button span {
   position: relative;
   z-index: 2;
}
.transform-button:before {
   content: "";
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #68E5F7;
   transform-origin: left;
   transition: .5s;
}
.transform-button:hover {
   color: #68E5F7;
   border-color: #68E5F7;
}
.transform-button:hover:before {
   transform: rotateY(92deg);
}

Пример 3. Анимированные границы кнопок

<a class="sq-btn btn-one" href="">Читать далее</a>
<a class="sq-btn" href="">Читать далее</a>
<a class="sq-btn btn-one" href="">Читать далее</a>
.sq-btn {
   display: inline-block;
   position: relative;
   min-width: 178px;
   margin: 6px 28px;
   padding: 15px 40px;
   font-weight: 800;
   font-family: sans-serif;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #0010ff;
   transition: .15s ease-out;
   box-sizing: border-box;
   text-decoration: none;
}
.btn-one {
   color: #ff9585;
}
.sq-btn:last-of-type {
   margin: 6px 28px;
}
.sq-btn:before {
   content: "";
   position: absolute;
   top: -6px;
   left: 0;
   height: calc(100% + 12px);
   width: 100%;
   border: 2px solid #0010ff;
   box-sizing: border-box;
   transition: .2s ease-in-out;
}
.btn-one:before {
   border: 2px solid #ff9585;
}
.sq-btn:after {
   content: "";
   position: absolute;
   top: 0;
   left: -8px;
   height: 100%;
   width: calc(100% + 16px);
   border: 1px solid #0010ff;
   box-sizing: border-box;
   transition: .2s ease-in-out;
}
.btn-one:after {
   border: 1px solid #ff9585;
}
.sq-btn:hover:before {
   top: 0;
   left: -8px;
   height: 100%;
   width: calc(100% + 16px);
}
.sq-btn:hover:after {
   top: -6px;
   left: 0;
   height: calc(100% + 12px);
   width: 100%;
}

Пример 4. Кнопка с анимированной иконкой

<button type="submit" class="submit-btn">отправить</button>
.submit-btn {
   display: inline-block;
   position: relative;
   overflow: hidden;
   height: 45px;
   min-width: 200px;
   margin-right: 20px;
   border: none;
   border-radius: 35px;
   padding-right: 30px;
   background: #ff5c5a;
   color: white;
   font-size: 20px;
}
.submit-btn:last-of-type {
   margin-right: 0;
}
.submit-btn:after {
   position: absolute;
   right: 10px;
   top: 0;
   width: 45px;
   height: 45px;
   line-height: 45px;
   content: "\f1d8";
   font-family: FontAwesome;
   background: #ff5c5a;
   border-radius: 50%;
   color: white;
   font-size: 22px;
}
@keyframes float {
   0%, 100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-8px);
   }
}
.submit-btn:hover:after {
   animation: float 2s linear infinite;
}

Пример 5. Кнопка с анимированной стрелкой

<div class="button-wrapper">
<a href="" class="arrow-btn">Выбрать<span></span></a>
</div>
.button-wrapper {
   max-width: 400px;
   margin: 50px auto;
   text-align: center;
   overflow: hidden;
}
.arrow-btn {
   position: relative;
   display: inline-block;
   padding: 15px 30px;
   text-decoration: none;
   color: #2fc989;
   border: 4px solid #2fc989;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: .4em;
   transition: .2s;
   transition-delay: .1s;
}
.arrow-btn:hover {
   color: white;
   padding: 15px 35px;
}
.arrow-btn span {
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   z-index: -1;
   overflow: hidden;
   transition: .35s cubic-bezier(.215, .61, .215, 1);
}
.arrow-btn span:before {
   content: "";
   position: absolute;
   top: -5%;
   left: -210%;
   width: 200%;
   height: 108%;
   background: #2fc989;
   transform: skew(-15deg, 0);
   transition: .5s;
}
.arrow-btn:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 50%;
   left: -1000%;
   height: 2px;
   margin-top: -1px;
   width: 400%;
   background: #2fc989;
   transition: .5s;
}
.arrow-btn:hover:after {
   width: 140%;
   left: -20%;
}
.arrow-btn:hover span:before {
   left: -25%;
}

Пример 6. Кнопка-рамка с уголком

<a href="" class="border-btn color-one">Читать далее</a>
<a href="" class="border-btn color-two">Читать далее</a>
<a href="" class="border-btn color-three">Читать далее</a>
.border-btn {
   display: inline-block;
   position: relative;
   padding: 10px 25px;
   margin-right: 20px;
   background: #FFF9F1;
   text-decoration: none;
   font-family: 'Marck Script', cursive;
   letter-spacing: 1px;
   border-width: 6px;
   border-style: double;
   transition: .5s;
}
.color-one {
   border-color: #8FD4DB;
   color: #F5745F;
}
.color-two {
   border-color: #F3755F;
   color: #D7C98C;
}
.color-three {
   border-color: #1E2843;
   color: #8FD4DB;
}
.border-btn:before, .border-btn:after {
   content: "";
   position: absolute;
   width: 16px;
   height: 2px;
   transform: rotate(-45deg);
   transition: .5s;
}
.color-one:before, .color-one:after {
   background: #8FD4DB;
}
.color-two:before, .color-two:after {
   background: #F3755F;
}
.color-three:before, .color-three:after {
   background: #1E2843;
}
.border-btn:before {
   left: -3px;
   top: 3px;
}
.border-btn:after {
   right: -3px;
   bottom: 3px;
}
.color-one:hover {
   background: #8FD4DB;
   border-color: #FFF9F1;
}
.color-two:hover {
   background: #F3755F;
   border-color: #8FD4DB;
}
.color-three:hover {
   background: #1E2843;
   border-color: #D7C98C;
}
.color-one:hover:before, .color-one:hover:after {
   background: #FFF9F1;
}
.color-two:hover:before, .color-two:hover:after {
   background: #8FD4DB;
}
.color-three:hover:before, .color-three:hover:after {
   background: #D7C98C;
}

Пример 7. Кнопка-рамка

<a href="" class="action-btn">Купить</a>
.action-btn {
   position: relative;
   display: inline-block;
   padding: 8px 20px;
   margin: 20px;
   text-decoration: none;
   font-family: 'Comfortaa', cursive;
   font-size: 14px;
   text-transform: uppercase;
   font-weight: bold;
   color: #112D52;
   background: #FF5438;
   border: 2px solid #112D52;
   transition: .4s linear;
}
.action-btn:after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   height: 130%;
   width: 91%;
   border: 2px solid #112D52;
   transform: translate(-50%, -50%);
   z-index: -1;
}
.action-btn:hover {
   background: #112D52;
   color: #FF5438;
}

Публикации по этой теме:

Красивые кнопки для сайта. Часть 4

Красивые кнопки для сайта. Часть 3

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

2.7. CSS-ссылки

Поделиться: