순풍 버튼

Tailwind로 구축된 반응형 버튼. 버튼은 아웃라인, 라운드, 소셜, 플로팅, 고정, 태그 등 여러 버튼 유형에 대해 미리 정의된 스타일을 제공합니다.

설치

빠른 시작

Tailwind 사용을 시작하려면 스타터를 다운로드하기만 하면 됩니다.

DOWNLOAD ZIP STARTER

Tailwind Elements는 TailwindCSS에서 이미 CSS를 변경하거나 추가하지 않습니다.

구성 요소를 Tailwind 디자인에 직접 복사하면 바로 작동합니다.

일부 동적 구성 요소(드롭다운 또는 모달과 같은)에서는 Font Awesome 아이콘과 사용자 지정 JavaScript를 추가합니다. 그러나 추가 설치가 필요하지 않으며 필요한 모든 코드가 항상 예제에 포함되어 있으며 모든 Tailwind 프로젝트에 복사됩니다. 작동합니다.

MDB GO

커스터마이징

일반 버튼


HTML

<button
    class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
    type="button">
    Small
  </button>

  <button
    class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
    type="button">
    Medium
  </button>

  <button
    class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
    type="button">
    Large
  </button>

아이콘이 있는 일반 버튼


HTML

<!-- Required font awesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

      <button
        class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
        type="button">
        <i class="fas fa-gem"></i> Small
      </button>

      <button
        class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
        type="button">
        <i class="fas fa-gem"></i> Regular
      </button>

      <button
        class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
        type="button">
        <i class="fas fa-gem"></i> Large
      </button>

📄 버튼 설명서 페이지에서 더 많은 사용자 지정 예제를 볼 수 있습니다.

중요한 자원

다음은 이 구성 요소로 작업하는 데 도움이 되도록 준비한 리소스입니다.

읽기📄 Buttons documentation page <-- 여기에서 시작

프로젝트를 최대한 활용하려면 버튼과 관련된 다른 구성 요소 옵션도 숙지해야 합니다. 목록을 찾으려면 아래 섹션을 참조하십시오.

프로젝트를 완료한 후 CLI로 게시하여 💽 Free hosting (beta)을 받을 수 있습니다.

관련 구성 요소 옵션 및 기능

Accordion

Alerts

Badges

Button group

Cards

Carousel

Charts

Chips

Dropdown

Gallery

Headings

Images

List group

Modal

Paragraphs

Popover

Progress

Rating

Spinners

Stepper

Tables

Template

Toast

Tooltip

추가 리소스

학습 로드맵을 통해 웹 개발에 대해 알아보세요.
🎓 Start Learning

메일링 리스트에 가입하고 개발자를 위한 독점 리소스를 받으세요.
🎁 Get gifts

영감과 커뮤니티 경험을 위해 비공개 FB 그룹에 가입하세요.
👨‍👩‍👧‍👦 Ask to join

GitHub의 STAR를 사용하여 오픈 소스 패키지 생성 지원