Оформление кнопок на сайте

Продолжаем публикацию оформления кнопок для сайта. Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.

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

Кнопки со шторкой

<button class="button_blind button_ver ">Вертикальная</button>
<button class="button_blind button_gor ">Горизонтальная</button>
<button class="button_blind button_klin ">Клиновидная</button>

class="button_blind">
это внешний вид всех нижерасположенных кнопок, а второй — сам эффект.

.button_blind {
   float: left;
   font-size:1.2em;
   min-width: 150px;
   max-width: 250px;
   display: block;
   margin: 1em 2em;
   padding: 1em 2em;
   border: 2px solid #a7a5a5;
   border-radius:5px;
   background:#FFC96B;
   position: relative;
   z-index: 1;
}
 
/*Вертикальная шторка*/
.button_ver::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background:#bf82e0;
   z-index: -1;
   opacity: 0;
   border-radius: 4px;
   -webkit-transform: scale3d(0.1, 1, 1);
   transform: scale3d(0.1, 1, 1);
   -webkit-transition:all 0.7s, cubic-bezier(0.2, 1, 0.3, 1);
   transition: all 0.7s, cubic-bezier(0.2, 1, 0.3, 1);
}
.button_ver:hover {
   color: #fff;
   border-radius: 5px;
   border-color: #5a5a58;
   -webkit-transition: all 0.7s, cubic-bezier(0.2, 1, 0.3, 1);
   transition: all 0.7s, cubic-bezier(0.2, 1, 0.3, 1);
}
.button_ver:hover::before {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

/*Горизонтальная шторка*/
.button_gor::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #bf82e0;
   z-index: -1;
   opacity: 0;
   border-radius: 4px;
   -webkit-transform: scale3d(1, 0.1, 1);
   transform: scale3d(1, 0.1, 1);
   -webkit-transition:all 0.7s, cubic-bezier(0.2, 1, 0.3, 1);
   transition: all 0.7s, cubic-bezier(0.2, 1, 0.3, 1);	
}
.button_gor:hover {
   color: #fff;
   border-radius: 5px;
   border-color: #5a5a58;
   -webkit-transition: all 0.7s, cubic-bezier(0.2, 1, 0.3, 1);
   transition: all 0.7s, cubic-bezier(0.2, 1, 0.3, 1);
}
.button_gor:hover::before {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

/*Клиновидная шторка*/
.button_klin{
   overflow: hidden;
   -webkit-transition:all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
   transition:all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}
.button_klin::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #bf82e0;
   z-index: -1;
   -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
   transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
   -webkit-transform-origin: 0% 100%;
   -ms-transform-origin: 0% 100%;
   transform-origin: 0% 100%;
   -webkit-transition:all 0.7s;
   transition: all 0.7s;
}
.button_klin:hover {
   color: #fff;
   border-color: #5a5a58;
}
.button_klin:hover::before {
   opacity: 1;
   background-color: #bf82e0;
   -webkit-transform: rotate3d(0, 0, 1, 0deg);
   transform: rotate3d(0, 0, 1, 0deg);
   -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
   transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

Двойная шторка

<button class="button_blind button_blinker" data-text="Open"><span>Close</span></button>
<button class="button_blind button_blinker_2" data-text="Open"><span>Close</span></button>
<button class="button_blind button_blinker_3" data-text="Open"><span>Close</span></button>

/*Вариант 1*/
.button_blinker{
   overflow: hidden;
   color: #333;
}
.button_blinker::before,
.button_blinker::after {
   content: attr(data-text);
   position: absolute;
   width: 100%;
   height: 50%;
   left: 0;
   background: #7986cb;
   color: #fff;
   overflow: hidden;
   -webkit-transition:all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
   transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}
.button_blinker::before {
   top: 0;
   padding-top: 1em;
}
.button_blinker::after {
   bottom: 0;
   line-height: 0;
}
.button_blinker > span {
   display: block;
   -webkit-transform: scale3d(0.2, 0.2, 1);
   transform: scale3d(0.2, 0.2, 1);
   opacity: 0;
   -webkit-transition:all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
   transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}

.button_blinker:hover::before {
   -webkit-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
}
.button_blinker:hover::after {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
}
.button_blinker:hover > span {
   opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
}

/*Вариант 2*/
.button_blinker_2{
   overflow: hidden;
   color: #333;
}
.button_blinker_2::before,
.button_blinker_2::after {
   content: attr(data-text);
   position: absolute;
   width: 100%;
   height: 50%;
   left: 0;
   background: #7986cb;
   color: #fff;
   overflow: hidden;
   -webkit-transition:all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}
.button_blinker_2::before {
   top: 0;
   padding-top: 1em;
}
.button_blinker_2::after {
   bottom: 0;
   line-height: 0;
}
.button_blinker_2 > span {
   display: block;
   -webkit-transform: scale3d(0.2, 0.2, 1);
   transform: scale3d(0.2, 0.2, 1);
   opacity: 0;
   -webkit-transition:all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
   transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}
.button_blinker_2:hover::before {
   -webkit-transform: translate3d( -100%, 0, 0);
   transform: translate3d( -100%, 0, 0);
   }
.button_blinker_2:hover::after {
   -webkit-transform: translate3d( 100%, 0, 0);
   transform: translate3d( 100%, 0, 0);
   }
.button_blinker_2:hover > span {
   opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
}

/*Вариант 3*/
.button_blinker_3{
   overflow: hidden;
color: #333;
}
.button_blinker_3::before,
.button_blinker_3::after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    background: #7986cb;
    color: #fff;
    overflow: hidden;
    -webkit-transition:all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
    transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);	
}
.button_blinker_3::before {
   top: 0;
   padding-top: 1em;
}
.button_blinker_3::after {
   bottom: 0;
   line-height: 0;
}
.button_blinker_3 > span {
   display: block;
   -webkit-transform: scale3d(0.2, 0.2, 1);
   transform: scale3d(0.2, 0.2, 1);
   opacity: 0;
   -webkit-transition:all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
   transition: all 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}
.button_blinker_3:hover::before {
   -webkit-transform: translate3d( 100%, -100%, 0);
   transform: translate3d( 100%, -100%, 0);
}
.button_blinker_3:hover::after {
   -webkit-transform: translate3d( 100%, 100%, 0);
   transform: translate3d( 100%, 100%, 0);
}
.button_blinker_3:hover > span {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

Шторка + смена текста

<button class="button_blind button_removal" data-text="Загрузка"><span>Download</span></button>
<button class="button_blind button_removal_2" data-text="Загрузка"><span>Download</span></button>
<button class="button_blind button_removal_3" data-text="Загрузка"><span>Download</span></button>

/*Вариант1*/
.button_removal {
   overflow: hidden;
   padding: 0;
}
.button_removal:hover {border-color:#444;} 
.button_removal::before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left:-25px;
   width: 100%;
   height: 100%;
   background: #bf82e0;
   color: #fcffba;
   -webkit-transform: translate3d(0,100%, 0);
   transform: translate3d(0,100%, 0);
}
.button_removal > span {
   display: block;
}
.button_removal::before,
.button_removal > span {
   padding: 1em 2em;
   -webkit-transition: -webkit-transform 0.6s;
   transition: transform 0.6s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button_removal:hover::before {
   border-color:#444;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}
.button_removal:hover > span {
   -webkit-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
   }

/*Вариант 2*/
.button_removal_2 {
   overflow: hidden;
   padding: 0;
   }
.button_removal_2:hover {border-color:#444;} 
.button_removal_2::before {
content: attr(data-text);
position: absolute;
top: 0;
left:-25px;
width: 100%;
height: 100%;
background: #bf82e0;
color: #fcffba;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.button_removal_2 > span {
   display: block;
}
.button_removal_2::before,
.button_removal_2 > span {
   padding: 1em 2em;
   -webkit-transition: -webkit-transform 0.6s;
   transition: transform 0.6s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button_removal_2:hover::before {
   border-color:#444;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}
.button_removal_2:hover > span {
   -webkit-transform: translate3d( 100%, 0, 0);
   transform: translate3d( 100%, 0, 0);
}

 /*Вариант 3*/
.button_removal_3 {
   overflow: hidden;
   padding: 0;
}
.button_removal_3:hover {border-color:#444;} 
.button_removal_3::before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left:-25px;
   width: 100%;
   height: 100%;
   background: #bf82e0;
   color: #fcffba;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
}
.button_removal_3 > span {
   display: block;
}
.button_removal_3::before,
.button_removal_3 > span {
   padding: 1em 2em;
   -webkit-transition: -webkit-transform 0.6s;
   transition: transform 0.6s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button_removal_3:hover::before {
   border-color:#444;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}
.button_removal_3:hover > span {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
}

Перевоплощение

<button class="button_blind button_change">Reset</button>
<button class="button_blind button_change_2">Reset</button>
<button class="button_blind button_change_3><span>Reset</span></button>   

/*Вариант1*/
.button_change {
   padding: 1.2em 3em;
   color: #fff;
   border: none;
   background: none;
}
.button_change::before,
.button_change::after {
   content: '';
   border-radius: inherit;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   -webkit-transition: -webkit-transform 0.5s, background-color 0.5s;
   transition: transform 0.5s, background-color 0.5s;
   -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
   transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
}
.button_change::before {
   border: 2px solid #7986cb;
}
.button_change::after {
   background: #7986cb;
}
.button_change:hover::before {
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
}
.button_change::before,
.button_change:hover::after {
   -webkit-transform: scale3d(0.7, 0.7, 1);
   transform: scale3d(0.7, 0.7, 1);
}
.button_change:hover::after {
   background-color: #3f51b5;
   border-radius: 50%;
}

/*Вариант 2 */
.button_change_2 {
   background: #7986CB;
   padding: 1.2em 2em;
   color: #fff;
   border:none;
   -webkit-transition: background-color 0.9s, color 0.9s;
   transition: background-color 0.9s, color 0.9s;
}
.button_change_2::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 2px solid #3f51b5;
   z-index: -1;
   border-radius: inherit;
   opacity: 0;
   -webkit-transform: scale3d(0.2, 0.2, 1);
   transform: scale3d(0.2, 0.2, 1);
   -webkit-transition: -webkit-transform 0.9s, opacity 0.9s;
   transition: transform 0.9s, opacity 0.9s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button_change_2:hover {
   background-color: transparent;
   color: #444;
}
.button_change_2:hover::before {
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
   opacity: 1;
}

/*Вариант 3*/
.button_change_3 {
   padding: 1.2em 2em;
   color: #fff;
   border: none;
   background:transparent;
}
.button_change_3:hover {color: #444;}
.button_change_3 > span {
   padding-left: 0.35em;
}
.button_change_3::before,
.button_change_3::after {
   content: '';
   z-index: -1;
   border-radius: inherit;
   pointer-events: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden;
   -webkit-transition: -webkit-transform 0.9s, opacity 0.9s;
   transition: transform 0.9s, opacity 0.9s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button_change_3::before {
   border: 2px solid  #3f51b5;
   opacity: 0;
   -webkit-transform: scale3d(1.2, 1.2, 1);
   transform: scale3d(1.2, 1.2, 1);
}
.button_change_3::after {
   background: #7986CB;
}
.button_change_3:hover::before {
   opacity: 1;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
}
.button_change_3:hover::after {
   opacity: 0;
   -webkit-transform: scale3d(0.8, 0.8, 1);
   transform: scale3d(0.8, 0.8, 1);
}

Прыгающие буквы

<button class="button_blind  button__letter " data-text="Spring letter">
   <spa>>S</span>
  <span>p</span>
   <span>r</span>
   <span>i</span>
   <span>n</span>
   <span>g</span>
    <span>l</span>
   <span>e</span>
   <span>t</span>
   <span>t</span>
   <span>e</span>
   <span>r</span>
</button>
<button class="button_blind button__letter_2  ">
   <span>S</span>
   <span>p</span>
   <span>r</span>
   <span>i</span>
   <span>n</span>
   <span>g</span>
    <span>l</span>
   <span>e</span>
   <span>t</span>
   <span>t</span>
   <span>e</span>
   <span>r</span>
</button>
<button class="button_blind button__letter_3 " data-text="Spring letter">
   <span>К</span>
   <span>р</span>
   <span>у</span>
   <span>г</span>
   <span>о</span>
   <span>в</span>
   <span>о</span>
   <span>р</span>
   <span>о</span>
   <span>т</span>
   <span>и</span>
   <span>к</span>
</button>

/*Вариант 1*/
.button__letter {
   padding: 0 2em;
   background: #7986cb;
   color: #fff;
   overflow: hidden;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
}
.button__letter > span {
   display: inline-block;
   padding: 1em 0;
   opacity: 0;
   color: #fff;
   -webkit-transform: translate3d(0, -10px, 0);
   transform: translate3d(0, -10px, 0);
   -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
   transition: transform 0.3s, opacity 0.3s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button__letter::before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 1em 0;
   -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
   transition: transform 0.3s, opacity 0.3s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button__letter:hover {
   background-color: #3f51b5;
}
.button__letter:hover::before {
   opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
}
.button__letter:hover > span {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}
.button__letter:hover > span:nth-child(1) {
   -webkit-transition-delay: 0.045s;
   transition-delay: 0.045s;
}
.button__letter:hover > span:nth-child(2) {
   -webkit-transition-delay: 0.09s;
   transition-delay: 0.09s;
}
.button__letter:hover > span:nth-child(3) {
	-webkit-transition-delay: 0.135s;
	transition-delay: 0.135s;
}
.button__letter:hover > span:nth-child(4) {
   -webkit-transition-delay: 0.18s;
   transition-delay: 0.18s;
}
.button__letter:hover > span:nth-child(5) {
   -webkit-transition-delay: 0.225s;
   transition-delay: 0.225s;
}
.button__letter:hover > span:nth-child(6) {
   -webkit-transition-delay: 0.27s;
   transition-delay: 0.27s;
}
.button__letter:hover > span:nth-child(7) {
   -webkit-transition-delay: 0.315s;
   transition-delay: 0.315s;
}
.button__letter:hover > span:nth-child(8) {
   -webkit-transition-delay: 0.36s;
   transition-delay: 0.36s;
}
.button__letter:hover > span:nth-child(9) {
   -webkit-transition-delay: 0.405s;
   transition-delay: 0.405s;
}
.button__letter:hover > span:nth-child(10) {
   -webkit-transition-delay: 0.45s;
   transition-delay: 0.45s;
}
.button__letter:hover > span:nth-child(11) {
   -webkit-transition-delay: 0.495s;
   transition-delay: 0.495s;
}
.button__letter:hover > span:nth-child(12) {
   -webkit-transition-delay: 0.54s;
   transition-delay: 0.54s;
}

/*Вариант 2*/
.button__letter_2 {
   padding: 0 2em;
   overflow: hidden;
   background: #7986cb;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
}
.button__letter_2 > span {
   display: inline-block;
   padding: 1em 0;
}
.button__letter_2:hover {
   background-color: #3f51b5;
}
.button__letter_2:hover > span:nth-child(odd) {
   -webkit-animation: anim-letter-1 0.5s forwards;
   animation: anim-letter-1 0.5s forwards;
}
.button__letter_2:hover > span:nth-child(even) {
   -webkit-animation: anim-letter-2 0.5s forwards;
   animation: anim-letter-2 0.5s forwards;
}
.button__letter_2:hover > span:nth-child(odd),
.button__letter_2:hover > span:nth-child(even) {
   -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
@-webkit-keyframes anim-letter-1 {
   0%,
   100% {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
   49% {
     opacity: 1;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
   }
   50% {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
     color: inherit;
   }
   51% {
     opacity: 0;
     -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
     color: #fff;
   }
   100% {
     color: #fff;
   }
}
@keyframes anim-letter-1 {
   0%,
   100% {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
   49% {
     opacity: 1;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
   }
   50% {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
     color: inherit;
   }
   51% {
     opacity: 0;
     -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
     color: #fff;
   }
   100% {
     color: #fff;
   }
}
@-webkit-keyframes anim-letter-2 {
   0%,
   100% {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
   49% {
     opacity: 1;
     -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
   }
   50% {
     opacity: 0;
     -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
     color: inherit;
   }
   51% {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
     color: #fff;
   }
   100% {
     color: #fff;
   }
}
@keyframes anim-letter-2 {
   0%,
   100% {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
   }
   49% {
     opacity: 1;
     -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
   }
   50% {
     opacity: 0;
     -webkit-transform: translate3d(0, -100%, 0);
     transform: translate3d(0, -100%, 0);
     color: inherit;
   }
   51% {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
     color: #fff;
   }
   100% {
     color: #fff;
   }
}
.button__letter_2:hover > span:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.button__letter_2:hover > span:nth-child(2) {
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
}
.button__letter_2:hover > span:nth-child(3) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.button__letter_2:hover > span:nth-child(4) {
   -webkit-animation-delay: 0.15s;
   animation-delay: 0.15s;
}
.button__letter_2:hover > span:nth-child(5) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.button__letter_2:hover > span:nth-child(6) {
   -webkit-animation-delay: 0.25s;
   animation-delay: 0.25s;
}
.button__letter_2:hover > span:nth-child(7) {
   -webkit-animation-delay: 0.3s;
   animation-delay: 0.3s;
}
.button__letter_2:hover > span:nth-child(8) {
   -webkit-animation-delay: 0.35s;
   animation-delay: 0.35s;
}
.button__letter_2:hover > span:nth-child(9) {
   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;
}
.button__letter_2:hover > span:nth-child(10) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.button__letter_2:hover > span:nth-child(11) {
   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;
}
.button__letter_2:hover > span:nth-child(12) {
   -webkit-animation-delay: 0.55s;
   animation-delay: 0.55s;
}

/*Вариант 3*/
.button__letter_3 {
   padding: 0 2em;
   background: #7986cb;
   color: #fff;
   overflow: hidden;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
}

.button__letter_3 > span {
   display: inline-block;
   padding: 1em 0;
   opacity: 0;
   color: #fff;
   -webkit-transform: rotate(540deg);
   -ms-transform: rotate(540deg);
   transform: rotate(540deg);
   -webkit-transition: -webkit-transform 0.8s, opacity 0.3s;
   transition: transform 0.8s, opacity 0.3s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button__letter_3::before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 1em 0;
   -webkit-transition: -webkit-transform 0.8s, opacity 0.3s;
   transition: transform 0.8s, opacity 0.3s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button__letter_3:hover {
   background-color: #3f51b5;
}
.button__letter_3:hover::before {
   opacity: 0;
   -webkit-transform: translate3d(50%, 100%, 0);
   transform: translate3d(50%, 100%, 0);
}
.button__letter_3:hover > span {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0) ;
   transform: translate3d(0, 0, 0) ;
}
.button__letter_3:hover > span:nth-child(1) {
   -webkit-transition-delay: 0.045s;
   transition-delay: 0.045s;
}
.button__letter_3:hover > span:nth-child(2) {
   -webkit-transition-delay: 0.09s;
   transition-delay: 0.09s;
}
.button__letter_3:hover > span:nth-child(3) {
   -webkit-transition-delay: 0.135s;
   transition-delay: 0.135s;
}
.button__letter_3:hover > span:nth-child(4) {
   -webkit-transition-delay: 0.18s;
   transition-delay: 0.18s;
}
.button__letter_3:hover > span:nth-child(5) {
   -webkit-transition-delay: 0.225s;
   transition-delay: 0.225s;
}
.button__letter_3:hover > span:nth-child(6) {
   -webkit-transition-delay: 0.27s;
   transition-delay: 0.27s;
}
.button__letter_3:hover > span:nth-child(7) {
   -webkit-transition-delay: 0.315s;
   transition-delay: 0.315s;
}
.button__letter_3:hover > span:nth-child(8) {
   -webkit-transition-delay: 0.36s;
   transition-delay: 0.36s;
}
.button__letter_3:hover > span:nth-child(9) {
   -webkit-transition-delay: 0.405s;
   transition-delay: 0.405s;
}
.button__letter_3:hover > span:nth-child(10) {
   -webkit-transition-delay: 0.45s;
   transition-delay: 0.45s;
}
.button__letter_3:hover > span:nth-child(11) {
   -webkit-transition-delay: 0.495s;
   transition-delay: 0.495s;
}
.button__letter_3:hover > span:nth-child(12) {
   -webkit-transition-delay: 0.54s;
   transition-delay: 0.54s;
}