Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Раскрывающаяся CSS3 кнопка
Раскрывающаяся CSS3 кнопка
AndreyДата: Среда, 05.02.2014, 15:28:51 | Сообщение # 1
Технарь
Offline
3

В этой статье я хочу поделится с вами кнопкой, которая при наведении курсором мыши, раскрывается. И показывает скрытый в ней текст

Для начала как вы уже поняли смотрим мой тест на Фидле

Теперь идём в CSS и там прописываем:
Код
section, section div{   
   box-sizing:border-box;   
-moz-box-sizing:border-box;   
-webkit-box-sizing:border-box;   

-webkit-transition:.6s;   
    -moz-transition:.6s;   
    -o-transition:.6s;   
    transition:.6s;   
}   
   section, button{   
-webkit-transition-timing-function:ease;   
    -moz-transition-timing-function:ease;   
    -o-transition-timing-function:ease;   
    transition-timing-function:ease;   
}   
   section{   
   text-align:center;   
   display:inline-block;   
   position:relative;   
   padding:.375rem .375rem 0;   
   height:2.5rem;   
   width:200px;   
   background:#A9ADB6;   

-webkit-border-radius:.25rem;   
    -moz-border-radius:.25rem;   
    border-radius:.25rem;   

-webkit-perspective:300;   
    -moz-perspective:300;   
    -ms-perspective:300;   
    -o-perspective:300;   
    perspective:300;   

-webkit-box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);   
    -moz-box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);   
    box-shadow:0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);   
}   

.button{   
   opacity:0;   
}   
.button a{   
   color:#444;   
   text-decoration:none;   
   line-height:25px;   
}   
.cover{   
   position:absolute;   
   top:0;   
   right:0;   
   bottom:0;   
   left:0;   

-webkit-transform-origin:center bottom;   
    -moz-transform-origin:center bottom;   
    -ms-transform-origin:center bottom;   
    -o-transform-origin:center bottom;   
    transform-origin:center bottom;   

-webkit-transform-style:preserve-3d;   
    -moz-transform-style:preserve-3d;   
    -ms-transform-style:preserve-3d;   
    -o-transform-style:preserve-3d;   
    transform-style:preserve-3d;   
   font-size:1.25em;   
   color:white;   
   line-height:37px;   
   text-align:center;   
   pointer-events:none;   
   z-index:100;   
}   
.innie, .outie, .spine, .shadow{   
   position:absolute;   
   width:100%;   
}   
.innie, .outie{   
   height:100%;   
   background-image:-webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);   

-webkit-border-radius:.25rem;   
    -moz-border-radius:.25rem;   
    border-radius:.25rem;   
}   
.innie:after, .outie:after{   
   content:"Ваш текст";   
}   
.innie{   
   background-color:#67E2FE;   
   text-shadow:0 -2px 4px rgba(0,0,0,.2);   
}   
.spine{   
   top:.25rem;   
   background:#20C7F3;   
   height:.25rem;   

-webkit-transform:rotateX(90deg);   
    -moz-transform:rotateX(90deg);   
    -ms-transform:rotateX(90deg);   
    -o-transform:rotateX(90deg);   
    transform:rotateX(90deg);   

-webkit-transform-origin:center top;   
    -moz-transform-origin:center top;   
    -ms-transform-origin:center top;   
    -o-transform-origin:center top;   
    transform-origin:center top;   
}   
.shadow{   
   top:100%;   
   left:0;   
   height:3.5rem;   

-webkit-transform-origin:center top;   
    -moz-transform-origin:center top;   
    -ms-transform-origin:center top;   
    -o-transform-origin:center top;   
    transform-origin:center top;   

-webkit-transform:rotateX(90deg);   
    -moz-transform:rotateX(90deg);   
    -ms-transform:rotateX(90deg);   
    -o-transform:rotateX(90deg);   
    transform:rotateX(90deg);   
   opacity:0;   
   z-index:0;   
   background-image:-webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);   
   background-image:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);   
/*border-radius*/   
-webkit-border-radius:.4rem;   
    -moz-border-radius:.4rem;   
    border-radius:.4rem;   
}   
.outie{   
   background-color:#2EC8FA;   
-webkit-transform:translateZ(.25rem);   
    -moz-transform:translateZ(.25rem);   
    -ms-transform:translateZ(.25rem);   
    -o-transform:translateZ(.25rem);   
    transform:translateZ(.25rem);   
   text-shadow:0 2px 4px rgba(0,0,0,.2);   
}   
   section:hover{   
   background:#EBEFF2;   
}   
   section:hover .button{   
   opacity:1;   
}   
   section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine{   
-webkit-transition-timing-function:cubic-bezier(.2,.7,.1,1.1);   
    -moz-transition-timing-function:cubic-bezier(.2,.7,.1,1.1);   
    -o-transition-timing-function:cubic-bezier(.2,.7,.1,1.1);   
    transition-timing-function:cubic-bezier(.2,.7,.1,1.1);   
}   
   section:hover .cover{   
-webkit-transform:rotateX(-120deg);   
    -moz-transform:rotateX(-120deg);   
    -ms-transform:rotateX(-120deg);   
    -o-transform:rotateX(-120deg);   
    transform:rotateX(-120deg);   
}   
   section:hover .innie{   
   background-color:#3ADAFC;   
}   
   section:hover .spine{   
   background-color:#52B1E0;   
}   
   section:hover .outie{   
   background-color:#2174A0;   
   color:rgba(255,255,255,0);   
}   
   section:hover .shadow{   
   opacity:1;   
-webkit-transform:rotateX(45deg) scale(.95);   
    -moz-transform:rotateX(45deg) scale(.95);   
    -ms-transform:rotateX(45deg) scale(.95);   
    -o-transform:rotateX(45deg) scale(.95);   
    transform:rotateX(45deg) scale(.95);   
}


Здесь же в CSS находим:
Код
.innie:after, .outie:after{   
   content:"Ваш текст";   
}

Этот текст будет выводится на вашей кнопке

Теперь осталось прописать саму кнопку, и так где хотим видеть кнопку, пишем:
Код
<section>   
    <div class="button">   
    <a href="Ссылка">Текст который будет выводится когда вы наведёте курсор мыши на кнопку</a>   
       
    </div>   
    <div class="cover">   
    <div class="innie"></div>   
    <div class="spine"></div>   
    <div class="outie"></div>   
</div>   
    <div class="shadow"></div>   
</section>


Вот и всё, кнопка установлена!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Раскрывающаяся CSS3 кнопка
Страница 1 из 11
Поиск: