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. 다나가
    190808 - 수강완료
  2. bhppy@daum.net
    소개란의 buttons홈페이지(http://unicorn-ui.com/buttons 링크를 하면
    https://www.bluehost.com으로 연결되는데 어떻게 된것인지. 쿠키를 삭제해도 마찬가지로 연결됩니다.
  3. 박지성
    열정만 있다면 도메인 정도는 가볍게 이겨낼 수 있는 존재라 생각하기 때문에
  4. 윤혜인
    2019년 2월 12일 현재도 buttons는 도메인 만료인지 안나오네요ㅜㅜ
  5. 2018년 12월 11일 현재 Buttons 홈페이지 들어가면 Account suspended라고 나오네요 ㅠㅠ
  6. 김민영
    완료
  7. 정희나
    강의그대로 따라해도 버튼효과가 안나오내요 ㅜ
  8. 스페이스몽키
    이번 강의도 최고에요 감사합니다!
  9. 멜번리디아
    감사합니다.
  10. 푸른하늘
    12일차 공부 감사합니다
  11. ballbot
    버튼 디자인이 좋네요~
  12. 이봉
    잘듣고갑니다 ㅎㅎ감사합니다!!
  13. 폭스킴
    저에게 있어선 맞춤강의나 다름없네요~ 생각치 않게 좋은 아이디어를 얻어가네요~ 너무나 감사합니다~^^
  14. publicum
    이미 풍성한 강의에 계속해서 새로운 내용 추가해주셔서 감사합니다! :)
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기