Подборка красивых кнопок на CSS

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

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

Для наглядной демонстрации и просмотра эффекта кнопок, перейдите на страницу редактора кодов и установите код любой кнопки в его поле. В статье только фото кнопок.

Раскрывающаяся кнопка

<a href="###" class="transform-button"><span>Демонстрация 1</span></a>
<style>
.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: #556B2F;
   transform-origin: left;
   transition: .5s;
}
.transform-button:hover {
   color: #556B2F;
   border-color: #556B2F;
}
.transform-button:hover:before {
   transform: rotateY(92deg);
}
</style>

 Кнопка с анимацией и эффектом перечёркивания 

<div class="button-wrapper">
<a href="###" class="arrow-btn">Демонстрация<span></span></a>
</div>
<style>
.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%;
}
</style>

Кнопка с анимированной рамкой

<a href="###" class="action-btn">Демонстрация</a>
<style>
.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;
}
</style>

 Простая анимированная кнопка

<a href="###" button class="button-1">Демонстрация</button>

<style>
.button-1 {
    color: #fff;
    background: transparent;
    border: 2px solid #232323;
    position: relative;
    font-size: 14px;
    letter-spacing: .3em;
    font-family: 'Montserrat', sans-serif;
    padding: 17px 34px 17px 39px;
    transition: .2s ease-in-out;
    cursor: pointer;
}
.button-1:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 100%;
    height: 100%;
    background: #FF5438;
    z-index: -1;
    transition: .25s ease;
    transform: translate(0, 0);
}
.button-1:hover:before {
    transform: translate(4px, 4px);
}
</style>

Кнопка с анимацией и радужной рамкой 

<a href="###" class="glow-button">Демонстрация</a>
<style>
.glow-button {
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  margin: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 0 40px 40px #e3a9be inset, 0 0 0 0 #32D4E2;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
  color: white;
  transition: .15s ease-in-out;
}
.glow-button:hover {
  box-shadow: 0 0 10px 0 #32D4E2 inset, 0 0 10px 4px#32D4E2;
  color: #F137A6;
</style>

Вместо решёток в кодах устанавливаем адрес страницы, куда будет осуществлён переход при клике. Соответственно вашае название. И во всех вариантах можно "играть" c цветом общего фона, цветом при наведении, цветом текста.  Пишите в комментариях, кому потребуется корректировка в изменениях. Готовый код, как всегда, устанавливаем в теле сообщения в режиме HTML или в гаджете в макете. 

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

Всем хороших денёчков и до встречи.