Button

Share how to use the Button UI.

1. Filled Basic Button (Medium)

This is the default style button form.

Image

../_images/button01-1.png

Markup Code

1
2
3
 <a href="javascript:" class="ddp-btn-solid">Solid</a>
 <a href="javascript:" class="ddp-btn-solid ddp-dark">Solid</a>
 <a href="javascript:" class="ddp-btn-solid ddp-disabled">Solid</a>

Design Guide

../_images/button01.png

2. Filled Basic Buttons (Large)

Image

../_images/button02-1.png

Markup Code

1
2
3
 <a href="javascript:" class="ddp-btn-solid2">Solid</a>
 <a href="javascript:" class="ddp-btn-solid2 ddp-dark">Solid</a>
 <a href="javascript:" class="ddp-btn-solid2 ddp-disabled">Solid</a>

3. Icon Buttons (Medium)

Usually used for Popup screens.

Image

../_images/button03-1.png

Markup Code

1
2
3
4
 <a href="#" class=" ddp-btn-pop"><em class="ddp-btn-reset"></em>btn pop</a>
 <a href="#" class=" ddp-btn-pop ddp-bg-black"><em class="ddp-icon-checked"></em>btn pop</a>
 <a href="#" class=" ddp-btn-pop ddp-bg-black"><em class="ddp-icon-add2"></em>btn pop</a>
 <a href="#" class=" ddp-btn-pop ddp-bg-black"><em class="ddp-icon-link-plus"></em>btn pop</a>

4. Icon Buttons (Large)

Image

../_images/button04-1.png

Markup Code

1
2
 <a href="javascript:" class="ddp-btn-buttons2"><em class="ddp-icon-shot"></em>SNAPSHOT</a>
 <a href="javascript:" class="ddp-btn-buttons3">DONE</a>

Design Guide

../_images/button04.png

5. Toggle Buttons (List Buttons)

Image

../_images/button05-1.png

Markup Code

 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
 <ul class="ddp-list-buttons ddp-tab3">
     <li class="ddp-selected">
         All time
     </li>
     <li>
         Relative
     </li>
     <li class="">
         Specific
     </li>
 </ul>
 <ul class="ddp-list-buttons ddp-type2">
     <li class="ddp-selected">
         <em class="ddp-icon-check"></em>
         <label class="ddp-label-radio">
             <input type="radio" checked="checked">
             <i class="ddp-icon-radio"></i>
             <span class="ddp-txt-radio">Single</span>
         </label>
     </li>
     <li class="">
         <em class="ddp-icon-check"></em>
         <label class="ddp-label-checkbox">
             <input type="checkbox" checked="checked">
             <i class="ddp-icon-checkbox"></i>
             <span class="ddp-txt-checkbox">Multiple</span>
         </label>
     </li>
 </ul>
 <ul class="ddp-list-buttons ddp-type3 ">
     <li class="">
         Mo
     </li>
     <li class="">
         Tu
     </li>
     <li class="">
         We
     </li>
     <li class="ddp-selected">
         Th
     </li>
     <li class="">
         Fr
     </li>
     <li class="">
         Sa
     </li>
     <li class="">
         Su
     </li>
 </ul>
 <ul class="ddp-list-buttons ddp-dark">
     <li class="">
         개별 설정
     </li>
     <li class="ddp-selected">
         일괄 설정
     </li>
 </ul>
 <div class="ddp-list-tab-button ddp-type ddp-fleft">
     <!-- 선택시 ddp-selected 추가 -->
     <span class="ddp-selected"><em class="ddp-icon-tool-selectbox"></em></span>

     <span><em class="ddp-icon-tool-list"></em></span>
 </div>

Design Guide

../_images/button04.png

6. Checkbox Buttons

Image

../_images/button06-1.png

Markup Code

 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
 <label class="ddp-label-checkbox ddp-type">
     <input type="checkbox" checked="checked">
     <i class="ddp-icon-checkbox"></i>
     <span class="ddp-txt-checkbox">unchecked</span>
 </label>
 <label class="ddp-label-checkbox ddp-check-disabled">
     <input type="checkbox" checked="checked">
     <i class="ddp-icon-checkbox"></i>
     <span class="ddp-txt-checkbox">unchecked</span>
 </label>
 <label class="ddp-label-checkbox">
     <input type="checkbox">
     <i class="ddp-icon-checkbox"></i>
     <span class="ddp-txt-checkbox">unchecked</span>
 </label>
 <label class="ddp-label-checkbox">
     <input type="checkbox" checked="checked">
     <i class="ddp-icon-checkbox"></i>
     <span class="ddp-txt-checkbox">checked</span>
 </label>
 <label class="ddp-label-checkbox ddp-type2">
     <input type="checkbox" checked="checked">
     <i class="ddp-icon-checkbox"></i>
     <span class="ddp-txt-checkbox">unchecked</span>
 </label>
 <label class="ddp-label-checkbox ddp-type3">
     <input type="checkbox" checked="checked">
     <i class="ddp-icon-checkbox"></i>
     <span class="ddp-txt-checkbox">unchecked</span>
 </label>

Design Guide

../_images/button06.png

7. Radio Buttons

Image

../_images/button07-1.png

Markup Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 <label class="ddp-label-radio">
     <input type="radio">
     <i class="ddp-icon-radio"></i>
     <span class="ddp-txt-radio">unchecked</span>
 </label>
 <label class="ddp-label-radio">
     <input type="radio" checked="checked">
     <i class="ddp-icon-radio"></i>
     <span class="ddp-txt-radio">checked</span>
 </label>
 <label class="ddp-label-radio">
     <input type="radio" disabled="disabled">
     <i class="ddp-icon-radio"></i>
     <span class="ddp-txt-radio">disabled</span>
 </label>
 <label class="ddp-label-radio ddp-radiotype">
     <input type="radio">
     <i class="ddp-icon-radio"></i>
     <span class="ddp-txt-radio">patch</span>
 </label>

Design Guide

../_images/button07.png