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

Revision 20614, 8.7 KB checked in by nagano, 13 years ago (diff)

モバイル・スマートフォンのデザイン調整
  • 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 120% 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/* ボタン小（お気に入りに登録、住所自動入力）
99----------------------------------------------- */
100.spbtn-small {
101display: inline-block;
102margin: 0;
103padding: 0.2em 0.4em;
104color: #ffffff;
105text-shadow: 0px -1px 1px rgba(0,0,0,1);
106font: bold 100% helvetica;
107font-weight: bold;
108background-color: #666666;
109background-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)));
110text-align:center;
111vertical-align: middle;
112text-decoration: none;
113border: solid 1px #333333;
114-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.7);
115}
116
117
118/* ×ボタン (お気に入りから削除)
119----------------------------------------------- */
120.spbtn-delete {
121display: inline-block;
122line-height: 1em;
123width: 1em;
124height: 1em;
125margin: 0;
126margin-left: 5px;
127padding: 0;
128color: #ffffff;
129text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
130font-family: verdana;
131font-weight: bold;
132background-color: #333333;
133background-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)));
134text-align:center;
135vertical-align: middle;
136text-decoration: none;
137-webkit-border-radius: 4px;
138border: solid 1px #666666;
139}
140
141/* ログイン・会員登録・マイページボタン
142----------------------------------------------- */
143
144#block-login .spbtn{
145    background-color: #666666;
146    border-left: 1px solid #666666;
147    color: #FFFFFF;
148    display: block;
149    float: left;
150    margin: 5px 0;
151    padding: 0.3em 0;
152    text-align: center;
153    text-decoration: none;
154    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
155    vertical-align: middle;
156    width: 49.6%;
157text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
158background-color: #666666;
159background-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)));
160}
161
162#block-login .spbtn:first-child{
163width: 49.6%;
164border-left: none;
165margin-left: 0px;
166-webkit-border-top-left-radius: 4px;
167-webkit-border-bottom-left-radius: 4px;
168}
169#block-login .spbtn:last-child{
170width: 49.6%;
171-webkit-border-top-right-radius: 4px;
172-webkit-border-bottom-right-radius: 4px;
173margin-left:1px
174}
175#block-login .spbtn:only-child{
176width: 100%;
177max-width: 100%;
178-webkit-border-radius: 4px;
179}
180#block-login .spbtn > a{
181}
182
183/*ご利用規約はこちら　ボタン
184------------------------------------------------*/
185.kybtn{
186    background-color: #666666;
187    border-left: 1px solid #666666;
188    color: #FFFFFF;
189    display: block;
190    float: left;
191    margin: 5px 0;
192    padding: 0.3em 0;
193    text-align: center;
194    text-decoration: none;
195    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
196    vertical-align: middle;
197    width: 100%;
198text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
199background-color: #666666;
200background-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)));
201}
202
203
204/*住所自動入力　ボタン
205------------------------------------------------*/
206.oubtn{
207    background-color: #666666;
208    border-left: 1px solid #666666;
209    color: #FFFFFF;
210    display: block;
211    float: left;
212    margin: 5px 0;
213    padding: 0.3em 0;
214    text-align: center;
215    text-decoration: none;
216    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
217    vertical-align: middle;
218    width: 99%;
219text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
220background-color: #666666;
221background-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)));
222}
223
224
225/* 「TOPへ」ボタン
226----------------------------------------------- */
227#btn-top {
228display:block;
229position: absolute;
230top: 4px;
231right: 0.4em;
232font: bold 100% helvetica;
233width: 4.3em;
234border: 1px solid rgba(0,0,0,0.5);
235border-top: 1px solid rgba(0,0,0,0.7);
236background-color: rgba(51,51,51,0.2);
237background-color: #333332;
238background-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)));
239-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.3);
240vertical-align: middle;
241text-align: center;
242text-decoration: none;
243-webkit-border-radius: 5px;
244}
245#btn-top > a {
246display: block;
247padding-top: 0.3em;
248padding-bottom: 0.4em;
249color: #ffffff;
250font: bold 100% helvetica;
251text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
252vertical-align: middle;
253text-decoration: none;
254}
255
256/* ショッピング関連ボタン
257----------------------------------------------- */
258.spbtn-shopping {
259    background-color: #6dc935;
260    border: 1px solid #666666;
261    color: #FFFFFF;
262    display: block;
263    font: bold 120% helvetica;
264    margin: 0 auto;
265    padding: 7px;
266    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
267    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)));
268    -webkit-border-radius: 6px;
269    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
270
271/*display: block;
272margin: 0.5em auto 0.3em;
273font: bold 100% helvetica;
274border: solid 1px #666666;
275text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
276color: #ffffff;
277background-color: #fc4743;
278background-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)));
279-webkit-border-radius: 6px;
280-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);*/
281}
282a.spbtn-shopping {
283width: 95%;
284text-decoration:none;
285margin:0;
286text-align:center;
287}
288input.spbtn-shopping {
289width: 100%;
290margin:0;
291}
292
293p.addbtn {
294margin-bottom:20px;
295}
Note: See TracBrowser for help on using the repository browser.