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

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

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

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

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

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

Пример 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;
}
  • Создание Сайтов

    Кнопок много не бывает. Было их где-то штук 100 было бы отлично. Спасибо за подборку. Будем надеяться на третью часть.