Line 0
Link Here
|
|
|
1 |
/* Link body */ |
2 |
.persona-button{ |
3 |
color: #fff; |
4 |
display: inline-block; |
5 |
font-size: 14px; |
6 |
font-family: Helvetica, Arial, sans-serif; |
7 |
font-weight: bold; |
8 |
line-height: 1.1; |
9 |
overflow: hidden; |
10 |
position: relative; |
11 |
text-decoration: none; |
12 |
text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2); |
13 |
|
14 |
background: #297dc3; |
15 |
background: -moz-linear-gradient(top, #43a6e2, #287cc2); |
16 |
background: -ms-linear-gradient(top, #43a6e2, #287cc2); |
17 |
background: -o-linear-gradient(top, #43a6e2, #287cc2); |
18 |
background: -webkit-linear-gradient(top, #43a6e2, #287cc2); |
19 |
background: linear-gradient(top, #43a6e2, #287cc2); |
20 |
|
21 |
-moz-border-radius: 3px; |
22 |
-ms-border-radius: 3px; |
23 |
-o-border-radius: 3px; |
24 |
-webkit-border-radius: 3px; |
25 |
border-radius: 3px; |
26 |
|
27 |
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2); |
28 |
-ms-box-shadow: 0 1px 0 rgba(0,0,0,0.2); |
29 |
-o-box-shadow: 0 1px 0 rgba(0,0,0,0.2); |
30 |
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2); |
31 |
box-shadow: 0 1px 0 rgba(0,0,0,0.2); |
32 |
} |
33 |
|
34 |
.persona-button:hover{ |
35 |
background: #21669f; |
36 |
background: -moz-linear-gradient(top, #3788b9, #21669f); |
37 |
background: -ms-linear-gradient(top, #3788b9, #21669f); |
38 |
background: -o-linear-gradient(top, #3788b9, #21669f); |
39 |
background: -webkit-linear-gradient(top, #3788b9, #21669f); |
40 |
background: linear-gradient(top, #3788b9, #21669f); |
41 |
} |
42 |
|
43 |
.persona-button:active, .persona-button:focus{ |
44 |
top: 1px; |
45 |
-moz-box-shadow: none; |
46 |
-ms-box-shadow: none; |
47 |
-o-box-shadow: none; |
48 |
-webkit-box-shadow: none; |
49 |
box-shadow: none; |
50 |
} |
51 |
|
52 |
.persona-button span{ |
53 |
display: inline-block; |
54 |
padding: 5px 10px 5px 40px; |
55 |
} |
56 |
|
57 |
/* Icon */ |
58 |
.persona-button span:after{ |
59 |
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat; |
60 |
content: ''; |
61 |
display: block; |
62 |
width: 31px; |
63 |
|
64 |
position: absolute; |
65 |
bottom: 0; |
66 |
left: -3px; |
67 |
top: 0; |
68 |
z-index: 10; |
69 |
} |
70 |
|
71 |
/* Icon background */ |
72 |
.persona-button span:before{ |
73 |
content: ''; |
74 |
display: block; |
75 |
height: 100%; |
76 |
width: 20px; |
77 |
|
78 |
position: absolute; |
79 |
bottom: 0; |
80 |
left: 0; |
81 |
top: 0; |
82 |
z-index: 1; |
83 |
|
84 |
background: #42a9dd; |
85 |
background: -moz-linear-gradient(top, #50b8e8, #3095ce); |
86 |
background: -ms-linear-gradient(top, #50b8e8, #3095ce); |
87 |
background: -o-linear-gradient(top, #50b8e8, #3095ce); |
88 |
background: -webkit-linear-gradient(top, #50b8e8, #3095ce); |
89 |
background: linear-gradient(top, #50b8e8, #3095ce); |
90 |
|
91 |
-moz-border-radius: 3px 0 0 3px; |
92 |
-ms-border-radius: 3px 0 0 3px; |
93 |
-o-border-radius: 3px 0 0 3px; |
94 |
-webkit-border-radius: 3px 0 0 3px; |
95 |
border-radius: 3px 0 0 3px; |
96 |
} |
97 |
|
98 |
/* Triangle */ |
99 |
.persona-button:before{ |
100 |
background: #42a9dd; |
101 |
content: ''; |
102 |
display: block; |
103 |
height: 26px; |
104 |
width: 26px; |
105 |
|
106 |
position: absolute; |
107 |
left: 2px; |
108 |
top: 50%; |
109 |
margin-top: -13px; |
110 |
z-index: 0; |
111 |
|
112 |
background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce); |
113 |
background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce); |
114 |
background: -o-linear-gradient(-45deg, #50b8e8, #3095ce); |
115 |
background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce); |
116 |
background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */ |
117 |
|
118 |
-moz-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); |
119 |
-ms-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); |
120 |
-o-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); |
121 |
-webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1); |
122 |
box-shadow: 1px -1px 1px rgba(0,0,0,0.1); |
123 |
|
124 |
-moz-transform: rotate(45deg); |
125 |
-ms-transform: rotate(45deg); |
126 |
-o-transform: rotate(45deg); |
127 |
-webkit-transform: rotate(45deg); |
128 |
transform: rotate(45deg); |
129 |
} |
130 |
|
131 |
/* Inset shadow (required here because the icon background clips it when on the `a` element) */ |
132 |
.persona-button:after{ |
133 |
content: ''; |
134 |
display: block; |
135 |
height: 100%; |
136 |
width: 100%; |
137 |
|
138 |
position: absolute; |
139 |
left: 0; |
140 |
top: 0; |
141 |
bottom: 0; |
142 |
right: 0; |
143 |
z-index: 10; |
144 |
|
145 |
-moz-border-radius: 3px; |
146 |
-ms-border-radius: 3px; |
147 |
-o-border-radius: 3px; |
148 |
-webkit-border-radius: 3px; |
149 |
border-radius: 3px; |
150 |
|
151 |
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); |
152 |
-ms-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); |
153 |
-o-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); |
154 |
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); |
155 |
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); |
156 |
} |
157 |
|
158 |
/* ======================================================== |
159 |
* Dark button |
160 |
* ===================================================== */ |
161 |
.persona-button.dark{ |
162 |
background: #3c3c3c; |
163 |
background: -moz-linear-gradient(top, #606060, #3c3c3c); |
164 |
background: -ms-linear-gradient(top, #606060, #3c3c3c); |
165 |
background: -o-linear-gradient(top, #606060, #3c3c3c); |
166 |
background: -webkit-linear-gradient(top, #606060, #3c3c3c); |
167 |
background: linear-gradient(top, #606060, #3c3c3c); |
168 |
} |
169 |
.persona-button.dark:hover{ |
170 |
background: #2d2d2d; |
171 |
background: -moz-linear-gradient(top, #484848, #2d2d2d); |
172 |
background: -ms-linear-gradient(top, #484848, #2d2d2d); |
173 |
background: -o-linear-gradient(top, #484848, #2d2d2d); |
174 |
background: -webkit-linear-gradient(top, #484848, #2d2d2d); |
175 |
background: linear-gradient(top, #484848, #2d2d2d); |
176 |
} |
177 |
.persona-button.dark span:before{ /* Icon BG */ |
178 |
background: #d34f2d; |
179 |
background: -moz-linear-gradient(top, #ebac45, #d34f2d); |
180 |
background: -ms-linear-gradient(top, #ebac45, #d34f2d); |
181 |
background: -o-linear-gradient(top, #ebac45, #d34f2d); |
182 |
background: -webkit-linear-gradient(top, #ebac45, #d34f2d); |
183 |
background: linear-gradient(top, #ebac45, #d34f2d); |
184 |
} |
185 |
.persona-button.dark:before{ /* Triangle */ |
186 |
background: #d34f2d; |
187 |
background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d); |
188 |
background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d); |
189 |
background: -o-linear-gradient(-45deg, #ebac45, #d34f2d); |
190 |
background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d); |
191 |
background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */ |
192 |
} |
193 |
|
194 |
/* ======================================================== |
195 |
* Orange button |
196 |
* ===================================================== */ |
197 |
.persona-button.orange{ |
198 |
background: #ee731a; |
199 |
background: -moz-linear-gradient(top, #ee731a, #d03116); |
200 |
background: -ms-linear-gradient(top, #ee731a, #d03116); |
201 |
background: -o-linear-gradient(top, #ee731a, #d03116); |
202 |
background: -webkit-linear-gradient(top, #ee731a, #d03116); |
203 |
background: linear-gradient(top, #ee731a, #d03116); |
204 |
} |
205 |
.persona-button.orange:hover{ |
206 |
background: #cb6216; |
207 |
background: -moz-linear-gradient(top, #cb6216, #b12a13); |
208 |
background: -ms-linear-gradient(top, #cb6216, #b12a13); |
209 |
background: -o-linear-gradient(top, #cb6216, #b12a13); |
210 |
background: -webkit-linear-gradient(top, #cb6216, #b12a13); |
211 |
background: linear-gradient(top, #cb6216, #b12a13); |
212 |
} |
213 |
.persona-button.orange span:before{ /* Icon BG */ |
214 |
background: #e84a21; |
215 |
background: -moz-linear-gradient(top, #f7ad27, #e84a21); |
216 |
background: -ms-linear-gradient(top, #f7ad27, #e84a21); |
217 |
background: -o-linear-gradient(top, #f7ad27, #e84a21); |
218 |
background: -webkit-linear-gradient(top, #f7ad27, #e84a21); |
219 |
background: linear-gradient(top, #f7ad27, #e84a21); |
220 |
} |
221 |
.persona-button.orange:before{ /* Triangle */ |
222 |
background: #e84a21; |
223 |
background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21); |
224 |
background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21); |
225 |
background: -o-linear-gradient(-45deg, #f7ad27, #e84a21); |
226 |
background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21); |
227 |
background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */ |
228 |
} |