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

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

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

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Читать полностью
Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

Читать полностью
Анимированный логотип на чистом CSS
Анимированный логотип

Если вы посмотрите на логотип, он состоит из 4 основных цветных точек. Эти точки расширяются и принимают вид скругленных линий, затем сжимаются, принимая первоначальный вид.

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

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

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

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

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