CSS

buttons

소개

디자인 된 간단한 버튼 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>

 

댓글

댓글 본문
작성자
비밀번호
  1. ballbot
    버튼 디자인이 좋네요~
  2. 이봉
    잘듣고갑니다 ㅎㅎ감사합니다!!
  3. 폭스킴
    저에게 있어선 맞춤강의나 다름없네요~ 생각치 않게 좋은 아이디어를 얻어가네요~ 너무나 감사합니다~^^
  4. publicum
    이미 풍성한 강의에 계속해서 새로운 내용 추가해주셔서 감사합니다! :)
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기