생활코딩

Coding Everybody

코스 전체목록

닫기

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. 박병진
    감사합니다.
  2. 한강
    저도 홈페이지가 안열리네요. 다음에 해보겠습니다.
    오늘도 감사합니다. ^^!
    200618
  3. 버튼 홈페이지가 안들어가지네요 ;;
  4. index.html은 참고 문서이지 작업하거나 실습 문서에 불러오는 스타일시트가 아닙니다.
    실습 중인 문서에 buttons.css와 buttons.js 파일을 로드해야 사용할 수 있습니다.

    아래 소스 중 각 파일의 경로를 정확히 입력하였는지 확인해주세요.

    <link rel="stylesheet" href="buttons.css의 경로를 입력해주세요.">
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="buttons.js의 경로를 입력해주세요."></script>

    buttons.css는 다운로드한 buttons 폴더 안에 css 폴더가 있으며 그 안에 위치해 있습니다.
    buttons.js는 다운로드한 buttons 폴더 안에 js 폴더가 있으며 그 안에 위치해 있습니다.
    대화보기
    • green diseny
      저 혹시 어떤파일로 하는지 알수있을까요? index.html 거기 주소 저장한거 링크에 같다 붙여도 안돼서요
      대화보기
      • 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>
      • 주의!!
        뚜님이 알려주신
        http://166.62.126.231......se/
        이 링크로 가니까 이상한 사이트랑 연결되는 것 같아요;
        뭔 조커사진에 핵..? 영어로 뜨고.. 모두 조심하세요.
        나쁜 의도로 올리진 않으셨다 해도 이런 식으로 해킹사이트라도 연결하는 사람있으면 위험할것 같네요.

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