logo

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

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

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

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




<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;
}

Практические примеры 0

Рекомендую прочитать...

Анимация SVG — иконок
Анимация SVG-иконок

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

Читать полностью
Псевдоэлементы ::before и ::after
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

Эти псевдоэлементы позволяют вставить на странице ту информацию, которой нет в HTML-коде.

Читать полностью
Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.