소개
디자인 된 간단한 버튼 CSS 라이브러리 입니다.
데모
강의
소스
<!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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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><a href="http://unicorn-ui.com/">Option Link 1</a></li>
<li><a href="http://unicorn-ui.com/">Option Link 2</a></li>
<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><a href="http://unicorn-ui.com/"><i class="fa fa-heart-o"></i> Option Link 1</a></li>
<li><a href="http://unicorn-ui.com/">Option Link 2</a></li>
<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><a href="http://unicorn-ui.com/">Option Link 1</a></li>
<li><a href="http://unicorn-ui.com/">Option Link 2</a></li>
<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><a href="http://unicorn-ui.com/">Option Link 1</a></li>
<li class="button-dropdown-divider">
<a href="http://unicorn-ui.com/">Option Link 2</a>
</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><a href="http://unicorn-ui.com/">Option Link 1</a></li>
<li class="button-dropdown-divider">
<a href="http://unicorn-ui.com/">Option Link 2</a>
</li>
<li>
<a href="#">Option Link 3</a>
</li>
</ul>
</span>
</body>
</html>
