|
Подправить кнопку
#39050001
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Здравствуйте, уважаемые форумчане!
Нашел и подработал для себя один вариант кнопки "download"
Но не хватает знаний исправить зеркальное отражение текста.
Посмотрите, может у кого поучится.
html и css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
<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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
<section>
<div class="button">
<a href="">скачать файл PDF, 616 Кб</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="">скачть файл PDF, 748 Кб</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>
|
|
|
