소개
디자인 된 간단한 버튼 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 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://raw.githubusercontent.com/alexwolfe/Buttons/v2.0.0/css/buttons.css"><script type="text/javascript" src="buttons.js"></script><!-- Only needed if you want font icons --><link href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"> </head> <body> <a href="https://opentutorials.org" class="button button-3d"><i class="fa fa-camera"></i>opentutorials</a> <button type="button" class="button button-3d">opentutorials</button> <span class="button-dropdown" data-buttons="dropdown"> <button class="button button-rounded"> Select Me <i class="fa fa-caret-down"></i> </button> <ul class="button-dropdown-list"> <li class="button-dropdown-divider"> <a href="#">Option Link 3</a> </li> </ul> </span> <span class="button-dropdown button-dropdown-primary" data-buttons="dropdown"> <button class="button button-primary button-large"> <i class="fa fa-bars"></i> Select Me </button> <ul class="button-dropdown-list is-below"> <li class="button-dropdown-divider"> <a href="#">Option Link 3</a> </li> </ul> </span> <span class="button-dropdown button-dropdown-action" data-buttons="dropdown"> <button class="button button-action"> Select Me <i class="fa fa-caret-up"></i> </button> <ul class="button-dropdown-list is-above"> <li class="button-dropdown-divider"> <a href="#">Option Link 3</a> </li> </ul> </span> <span class="button-dropdown button-dropdown-plain" data-buttons="dropdown"> <button class="button button-caution button-pill"> Select Me <i class="fa fa-caret-down"></i> </button> <ul class="button-dropdown-list"> <li class="button-dropdown-divider"> </li> <li> <a href="#">Option Link 3</a> </li> </ul> </span> <span class="button-dropdown button-dropdown-inverse" data-buttons="dropdown"> <a href="#" class="button button-inverse"> <i class="fa fa-envelope"></i> Select Me <i class="fa fa-caret-down"></i> </a> <ul class="button-dropdown-list is-below"> <li class="button-dropdown-divider"> </li> <li> <a href="#">Option Link 3</a> </li> </ul> </span> </body></html> |
