Необычные анимированные кнопки с CSS3

Категория: CSS.

pure_css3_animated_buttons-9320250 В этом примере вы увидите как создаются анимированные интерактивные кнопки с использованием CSS3. Кнопки используют два состояния анимации, при наведении курсора и активное после нажатия на них.

Demo

Архив с примером

Шаг-1 HTML

Вот полный HTML код нашего примера, обратите внимание на классы кнопок. Здесь используются 2 различных типа кнопок, у каждого типа своё поведение анимации. Каждая кнопка состоит из нескольких внутренних элементов SPAN.



 
 
 Необычные анимированные кнопки с CSS3
 
 
 
 
 
 
 
 
 
 
 Кнопка #1 
 
 
 
 
 Кнопка #2 
 
 
 
 
 Кнопка #3 
 
 
 
 
 
 Регистрация 
 Бесплатно
 
 
 
 Поиск
 
 
 
 
 Подписываться

Шаг-2 CSS

Теперь первый файл стилей CSS который формирует макет страницы.

*{
 margin:0;
 padding:0;
}
body {
 color:#fff;
 font:14px/1.3 Arial,sans-serif;
 background:transparent url(../images/bg.gif) repeat top left;
}
footer {
 background-color:#212121;
 bottom:0;
 box-shadow: 0 -1px 2px #111111;
 -moz-box-shadow: 0 -1px 2px #111111;
 -webkit-box-shadow: 0 -1px 2px #111111;
 display:block;
 height:70px;
 left:0;
 position:fixed;
 width:100%;
 z-index:100;
}
footer h2{
 font-size:22px;
 font-weight:normal;
 left:50%;
 margin-left:-400px;
 padding:22px 0;
 position:absolute;
 width:540px;
}
footer a.stuts,a.stuts:visited{
 border:none;
 text-decoration:none;
 color:#fcfcfc;
 font-size:14px;
 left:50%;
 line-height:31px;
 margin:23px 0 0 110px;
 position:absolute;
 top:0;
}
footer .stuts span {
 font-size:22px;
 font-weight:bold;
 margin-left:5px;
}
.container {
 margin:20px auto;
 padding:20px;
 position:relative;
 width:800px;
}

Теперь стили самих кнопо

 
.buttons {
 overflow:hidden;
}
.but1{
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 
 box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
 -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
 -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
 
 background-color:#f4f5fe;
 display:block;
 float:left;
 margin:10px;
 overflow:hidden;
 padding:10px 15px;
 position:relative;
 text-decoration:none;
 
 transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 -o-transition:all 0.5s ease-in-out;
 -webkit-transition:all 0.5s ease-in-out;
}
.but1 .icon{
 background:transparent url(../images/download.png) no-repeat top left;
 float:left;
 height:32px;
 width:45px;
 
 transition:all 0.5s ease-in-out;
 -moz-transition:all 0.5s ease-in-out;
 -o-transition:all 0.5s ease-in-out;
 -webkit-transition:all 0.5s ease-in-out;
}
.but1 .title{
 font-size:18px;
 color:#000;
 display:block;
 float:left;
 font-weight:bold;
 line-height:32px;
}
.but1 .icon2{
 background:transparent url(../images/download2.png) no-repeat top left;
 height:32px;
 left:20px;
 opacity:0;
 position:absolute;
 top:-15px;
 width:32px;
}
.but1:hover{
 background-color:#e3e3ff;
 
 box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
 -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
 -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
 
 -webkit-transition-delay: 0.5s;
 -moz-transition-delay: 0.5s;
 -o-transition-delay: 0.5s;
 -ms-transition-delay: 0.5s;
 transition-delay: 0.5s;
}
.but1:hover .icon{
 transform:rotate(-90deg) scale(0.8);
 -ms-transform:rotate(-90deg) scale(0.8);
 -moz-transform:rotate(-90deg) scale(0.8);
 -o-transform:rotate(-90deg) scale(0.8);
 -webkit-transform:rotate(-90deg) scale(0.8);
}
.but1:active .icon{
 opacity:0;
}
.but1:active .icon2{
 opacity:1;
 -webkit-animation:slideDown1 1.0s linear infinite;
 -moz-animation:slideDown1 1.0s linear infinite;
 animation:slideDown1 1.0s linear infinite;
}
.but1:active{
 background-color:#c1c1ff;
 
 box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
 -moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
 -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.8);
}
 
@keyframes slideDown1{
 0% {
 top: -30px;
 }
 100% {
 top: 55px;
 }
}
@-webkit-keyframes slideDown1{
 0% {
 top: -30px;
 }
 100% {
 top: 55px;
 }
}
@-moz-keyframes slideDown1{
 0% {
 top: -30px;
 }
 100% {
 top: 55px;
 }
}
 
 
.but2{
 border-radius:15px;
 -moz-border-radius:15px;
 -webkit-border-radius:15px;
 
 background-color:#99cc99;
 float:left;
 height:40px;
 margin:10px;
 overflow:hidden;
 padding-left:20px;
 position:relative;
 text-decoration:none;
 
 transition:all 0.5s linear;
 -moz-transition:all 0.5s linear;
 -o-transition:all 0.5s linear;
 -webkit-transition:all 0.5s linear;
}
.but2 .title{
 color:#000000;
 display:block;
 float:left;
 font-size:18px;
 font-weight:bold;
 line-height:40px;
 
 transition:all 0.2s linear;
 -moz-transition:all 0.2s linear;
 -o-transition:all 0.2s linear;
 -webkit-transition:all 0.2s linear;
}
.but2 .extra{
 background-color:#63707e;
 color:#fff;
 float:left;
 font-size:18px;
 line-height:40px;
 opacity:0;
 position:relative;
 text-transform:uppercase;
 width:0px;
 
 transition:all 0.3s linear;
 -moz-transition:all 0.3s linear;
 -o-transition:all 0.3s linear;
 -webkit-transition:all 0.3s linear;
}
.but2 .extra span, .but2 .extra input {
 display:none;
}
.but2 .icon{
 background:transparent url(../images/right.png) no-repeat center center;
 float:left;
 height:40px;
 width:40px;
 
 transition:all 0.3s linear;
 -moz-transition:all 0.3s linear;
 -o-transition:all 0.3s linear;
 -webkit-transition:all 0.3s linear;
}
.but2:hover .extra span, .but2:hover .extra input{
 display:inline-block;
}
.but2:hover .extra{
 margin-left:10px;
 opacity: 1;
 padding-left:10px;
 padding-right:10px;
 text-align:center;
 width:150px;
}
.but2:hover .icon{
 transform:rotate(180deg);
 -ms-transform:rotate(180deg);
 -moz-transform:rotate(180deg);
 -o-transform:rotate(180deg);
 -webkit-transform:rotate(180deg);
}

Метки: CSS, Веб-разработчику

Web — мастер

Необычные анимированные кнопки с CSS3