source: closed/version-2_5-dev/html/user_data/packages/sphone/css/button.css @ 20764

Revision 20764, 9.2 KB checked in by nanasess, 15 years ago (diff)

#601 (コピーライトの更新)
  • Property svn:eol-style set to LF
  • Property svn:keywords set to Id
Line 
1@charset "utf-8";
2
3/* スマートフォン用グラデーションボタン
4----------------------------------------------- */
5/*.spbtn {
6display: block;
7margin: 0.5em auto 0.3em;
8padding: 0.4em 0;
9font: bold large helvetica;
10text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
11vertical-align: middle;
12text-align:center;
13text-decoration: none;
14color: #ffffff;
15background-color: #666666;
16background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
17border: solid 2px #666666;
18-webkit-border-radius: 8px;
19-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
20}*/
21.spbtn:before {
22content: "";
23display: block;
24height: 0;
25clear: both;
26visibility: hidden;
27}
28/*a.spbtn {
29width: 79%;
30max-width: 236px;
31}*/
32input.spbtn {
33width: 100%;
34}
35
36/* ボタン大（汎用）
37----------------------------------------------- */
38.spbtn-normal {
39color: #ffffff;
40border: solid 2px #666666;
41background-color: #666666;
42/*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));*/
43}
44
45/* ボタン大（承諾、送信）
46----------------------------------------------- */
47.spbtn-agree {
48    background-color: #6dc935;
49    border: 1px solid #666666;
50    color: #FFFFFF;
51    display: block;
52    font: bold 120% helvetica;
53    margin: 0.5em auto 0.3em;
54    padding: 7px;
55    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
56    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
57    -webkit-border-radius: 6px;
58    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
59    text-decoration:none;
60}
61
62/* ボタン大（キャンセル、退会）
63----------------------------------------------- */
64.spbtn-cancel {
65color: #ffffff;
66border: solid 2px #666666;
67background-color: #fc4743;
68/*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));*/
69}
70
71/* ボタン中（お問い合わせ、友達に教える）
72----------------------------------------------- */
73.spbtn-medeum {
74    background-color: #aaaaaa;
75    border: 1px solid #666666;
76    color: #FFFFFF;
77    display: block;
78    font: bold 100% helvetica;
79    margin: 0 auto;
80    padding: 7px;
81    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
82    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
83    -webkit-border-radius: 6px;
84    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
85/*text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
86-webkit-border-radius: 6px;
87-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);*/
88}
89a.spbtn-medeum {
90width: 95%;
91text-decoration:none;
92text-align:center;
93}
94input.spbtn-medeum {
95width: 100%;
96}
97
98.spbtn-medeum02 {
99    background-color: #aaaaaa;
100    border: 1px solid #666666;
101    color: #FFFFFF;
102    display: block;
103    font: bold 100% helvetica;
104    margin: 0 auto;
105    padding: 7px;
106    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
107    text-align:center;
108        -webkit-border-radius: 6px;
109/*text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
110-webkit-border-radius: 6px;
111-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);*/
112}
113
114
115
116/* ボタン小（お気に入りに登録、住所自動入力）
117----------------------------------------------- */
118.spbtn-small {
119display: inline-block;
120margin: 0;
121padding: 0.2em 0.4em;
122color: #ffffff;
123text-shadow: 0px -1px 1px rgba(0,0,0,1);
124font: bold 100% helvetica;
125font-weight: bold;
126background-color: #666666;
127background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
128text-align:center;
129vertical-align: middle;
130text-decoration: none;
131border: solid 1px #333333;
132-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.7);
133}
134
135
136/* ×ボタン (お気に入りから削除)
137----------------------------------------------- */
138.spbtn-delete {
139display: inline-block;
140line-height: 1em;
141width: 1em;
142height: 1em;
143margin: 0;
144margin-left: 5px;
145padding: 0;
146color: #ffffff;
147text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
148font-family: verdana;
149font-weight: bold;
150background-color: #333333;
151background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
152text-align:center;
153vertical-align: middle;
154text-decoration: none;
155-webkit-border-radius: 4px;
156border: solid 1px #666666;
157}
158
159/* ログイン・会員登録・マイページボタン
160----------------------------------------------- */
161
162#block-login .spbtn{
163    background-color: #666666;
164    border-left: 1px solid #666666;
165    color: #FFFFFF;
166    display: block;
167    float: left;
168    margin: 5px 0;
169    padding: 0.3em 0;
170    text-align: center;
171    text-decoration: none;
172    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
173    vertical-align: middle;
174    width: 49.6%;
175text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
176background-color: #666666;
177background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
178}
179
180#block-login .spbtn:first-child{
181width: 49.6%;
182border-left: none;
183margin-left: 0px;
184-webkit-border-top-left-radius: 4px;
185-webkit-border-bottom-left-radius: 4px;
186}
187#block-login .spbtn:last-child{
188width: 49.6%;
189-webkit-border-top-right-radius: 4px;
190-webkit-border-bottom-right-radius: 4px;
191margin-left:1px
192}
193#block-login .spbtn:only-child{
194width: 100%;
195max-width: 100%;
196-webkit-border-radius: 4px;
197}
198#block-login .spbtn > a{
199}
200
201/*ご利用規約はこちら　ボタン
202------------------------------------------------*/
203.kybtn{
204    background-color: #666666;
205    border-left: 1px solid #666666;
206    color: #FFFFFF;
207    display: block;
208    float: left;
209    margin: 5px 0;
210    padding: 0.3em 0;
211    text-align: center;
212    text-decoration: none;
213    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
214    vertical-align: middle;
215    width: 100%;
216    font-size: 90%;
217text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
218background-color: #666666;
219background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
220}
221
222
223/*住所自動入力　ボタン
224------------------------------------------------*/
225.oubtn{
226    background-color: #666666;
227    border-left: 1px solid #666666;
228    color: #FFFFFF;
229    display: block;
230    float: left;
231    margin: 5px 0;
232    padding: 0.3em 0;
233    text-align: center;
234    text-decoration: none;
235    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
236    vertical-align: middle;
237    width: 99%;
238text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
239background-color: #666666;
240background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
241}
242
243
244/* 「TOPへ」ボタン
245----------------------------------------------- */
246#btn-top {
247display:block;
248position: absolute;
249top: 4px;
250right: 0.4em;
251font: bold 100% helvetica;
252width: 4.3em;
253border: 1px solid rgba(0,0,0,0.5);
254border-top: 1px solid rgba(0,0,0,0.7);
255background-color: rgba(51,51,51,0.2);
256background-color: #333332;
257background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,0.01)), color-stop(.02,rgba(255,255,255,0.4)),color-stop(.5,rgba(255,255,255,0.3)));
258-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.3);
259vertical-align: middle;
260text-align: center;
261text-decoration: none;
262-webkit-border-radius: 5px;
263}
264#btn-top > a {
265display: block;
266padding-top: 0.3em;
267padding-bottom: 0.4em;
268color: #ffffff;
269font: bold 100% helvetica;
270text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
271vertical-align: middle;
272text-decoration: none;
273}
274
275/* ショッピング関連ボタン
276----------------------------------------------- */
277.spbtn-shopping {
278    background-color: #6dc935;
279    border: 1px solid #666666;
280    color: #FFFFFF;
281    display: block;
282    font: bold 120% helvetica;
283    margin: 0 auto;
284    padding: 7px;
285    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
286    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
287    -webkit-border-radius: 6px;
288    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
289
290/*display: block;
291margin: 0.5em auto 0.3em;
292font: bold 100% helvetica;
293border: solid 1px #666666;
294text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
295color: #ffffff;
296background-color: #fc4743;
297background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.25)), to(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.05)), color-stop(0.51, rgba(0,0,0,0.05)));
298-webkit-border-radius: 6px;
299-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);*/
300}
301a.spbtn-shopping {
302width: 95%;
303text-decoration:none;
304margin:0;
305text-align:center;
306}
307input.spbtn-shopping {
308width: 100%;
309margin:0;
310}
311
312p.addbtn {
313margin-bottom:20px;
314}
Note: See TracBrowser for help on using the repository browser.