Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Переключатели и кнопки » Необычная раскрывающаяся CSS3 кнопка

Необычная раскрывающаяся CSS3 кнопка

Опубликовал: artCreative™
Категория: Переключатели и кнопки
Дата: 20 Июня 2025 в 20:58

0 голосов

Как всегда сначала идет HTML структура, ее мы и напишем! напишем элемент section и обернем им весь наш код

HTML

Код

<section>
  <div class="button">
  <a href="http://get-element.3dn.ru">Уроки HTML CSS</a>

  </div>
  <div class="cover">
  <div class="innie"></div>
  <div class="spine"></div>
  <div class="outie"></div>
</div>
  <div class="shadow"></div>
</section>

Теперь напишем стили 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);
}

Если вы внимательно просмотрели код, то должны были увидеть этот кусочек кода

Код

.innie:after, .outie:after { content:"Тут ваш заголовок"; }

Тут мы пишем наш заголовок нашей кнопки. Но вот не задача, как же размножить эти кнопки? Ведь значение у нее прописывается тока в CSS и для всех кнопок оно будет одинаковым. Недолго думав я нашел решение!
В разметке мы написали 3 блока:

Код

<div class="innie"></div>//Это заголовок сзади нашей крышки
  <div class="spine"></div>
  <div class="outie"></div> //Это заголовок спереди нашей крышки

к ним я дописал 2 класса

Код

а в CSS следующее

Код

.innie2:after, .outie2:after { content:"Тут ваш заголовок #2"!important; }

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 811 « Назад

Теги материала: кнопка, раскрывающаяся, css3, необычная

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Переключатели и кнопки » Необычная раскрывающаяся CSS3 кнопка

Необычная раскрывающаяся CSS3 кнопка

Комментарии пользователей