Создать ответ 
Вариант кнопки "Download"
Автор Сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #1
Вариант кнопки "Download"
Есть такая кнопочка которую вполне можно использовать.
Но есть одно НО.
При наведении низ кнопки показывает отраженный текст.
Можно ли сделать, чтобы текст не был отраженным?

[Изображение: tid_330.jpg]

Это код
Код:
<style>
section, section div{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

-webkit-transition:1.0s;
  -moz-transition:1.0s;
  -o-transition:1.0s;
  transition:1.0s;
}
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;

margin: 22px;
padding:.375rem .375rem 0;
height:2.5rem;
width:300px;

-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:#000;
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:flat;
  -moz-transform-style:flat;
  -ms-transform-style:flat;
  -o-transform-style:flat;
  transform-style:flat;
font-size:1.25em;
color:white;
line-height:37px;
text-align:center;
pointer-events:none;

}
.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:"ГАЗЕТА ЗА 07.02.2015";
}
.innie{
color: black;

}
.innie2:after, .outie2:after { content:"ГАЗЕТА ЗА 28.02.2015"!important; }
.innie3:after, .outie3:after { content:"ГАЗЕТА ЗА 07.03.2015"!important; }
.innie4:after, .outie4:after { content:"ГАЗЕТА ЗА 21.03.2015"!important; }
.innie5:after, .outie5:after { content:"ГАЗЕТА ЗА 28.03.2015"!important; }
.innie6:after, .outie6:after { content:"ГАЗЕТА ЗА 04.04.2015"!important; }
.innie7:after, .outie7:after { content:"ГАЗЕТА ЗА 11.04.2015"!important; }
.innie8:after, .outie8:after { content:"ГАЗЕТА ЗА 18.04.2015"!important; }
.innie9:after, .outie9:after { content:"ГАЗЕТА ЗА 25.04.2015"!important; }
.innie10:after, .outie10:after { content:"ГАЗЕТА ЗА 02.05.2015"!important; }
.innie11:after, .outie11:after { content:"ГАЗЕТА ЗА 09.05.2015"!important; }



.outie{
background-color:#F58220;

}
section:hover{
background:#F58220;
}
section:hover .button{
opacity: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:#000;

}
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);
}
</style>

<section>
  <div class="button">
  <a href="">Уроки 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>

<section>
  <div class="button">
  <a href="">Уроки HTML CSS</a>
  
  </div>
  <div class="cover">
<div class="innie innie2"></div>
  <div class="spine"></div>
  <div class="outie outie2"></div>
</div>
  <div class="shadow"></div>
</section>

Пример здесь - _https://jsfiddle.net/7Lexus/fhv9z9ax/
21.05.2015 08:09:01
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru