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. rsong
    Github에 있는 buttons 라이브러리를 다운로드해서 사용하면 실습하실 수 있어요!

    https://github.com......ons

    여기 들어가셔서 Download ZIP으로 다운받으셔서 실습하던 html 문서가 있는 디렉토리에 압축푸시고 실습하시면 됩니다.

    이고잉님이 강의에서 참조하신 buttons 사이트 대신에 다운 받은 파일 중 index.html 여시면 참조하실 수 있는 페이지가 나옵니다. 거기서 필요한 소스를 복사 붙여넣기 해서 쓰시면 되고요.(페이지 로딩시간이 좀 있지만 기다리시면 몇 분 내로 나옵니다.)

    그리고 에디터에서 head 안에 아래 소스 넣으시면 잘 표시될거에요!
    (혹시 안되시면 압축해제한 디렉토리 확인해보시거나, 아래 href를 상황에 맞게 수정해주세요!)

    <link rel="stylesheet" href="./buttons/css/buttons.css">
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="./buttons/js/buttons.js"></script>


    -아이콘 넣기(https://fontawesome.com/icons)
    아래 소스를 head에 추가하시고 폰트 어썸 사이트 방문하셔서 이고잉님 강의대로 하시면 됩니다.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />



    -----------------------------------------------------------------------------------------------
    아래는 제가 실습한 HTML 입니다.

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="./buttons/css/buttons.css">
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="./buttons/js/buttons.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
    </head>
    <body>
    <a href="https://opentutorials.org">opentutorials</a>
    <button class="button button-3d"><i class="fas fa-code"></i> opentutorials</button>

    <span class="button-dropdown" data-buttons="dropdown">
    <a href="#" class="button button-rounded button-flat-primary"></i>lessons <i class="fa fa-caret-down"></i></a>
    <ul>
    <li><a href="https://github.com/unicorn-ui/Buttons">Buttons in Github</a></li>
    <li class="button-dropdown-divider"><a href="https://opentutorials.org/course/3084">Web1-HTML</a></li>
    <li><a href="https://opentutorials.org/course/3085">Web2-JavaScript</a></li>
    </ul>
    </span>
    </body>
    </html>
  2. 주의!!
    뚜님이 알려주신
    http://166.62.126.231......se/
    이 링크로 가니까 이상한 사이트랑 연결되는 것 같아요;
    뭔 조커사진에 핵..? 영어로 뜨고.. 모두 조심하세요.
    나쁜 의도로 올리진 않으셨다 해도 이런 식으로 해킹사이트라도 연결하는 사람있으면 위험할것 같네요.

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