Tailwind Link Button

链接按钮即将按钮转化为链接的表现形式

link button

链接按钮基础形式

<button class="outline-none mr-1 mb-1 px-3 py-1 bg-transprent text-xs font-bold text-blue-500 uppercase focus:outline-none">
  link button
</button>

样式	属性
outline-none	outline:0;
mr-1 mb-1	margin-right:.25rem; margin-bottom:.25rem;
px-3 py-1	padding:.25rem .75rem;
bg-transparent	background-color:transparent;
text-xs font-bold text-blue-500 uppercase	font-size:.125rem; font-weight:700; color:#4299e1;text-transform:uppercase;

链接按钮大小可分为三种类型

link button size

大小	尺寸	样式
small	小型	px-3 py-1 text-xs
regular	普通	px-6 py-3 text-sm
large	大型	px-8 py-3 text-base

链接按钮的表现形式分为三种

• 仅包含文字的链接按钮
• 仅包含字体图标的链接按钮
• 包含字体图标和文本的链接按钮

link button

代码显示效果

https://codepen.io/junchow/pen/GRpVWPG?editors=1000

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 flex flex-col items-center justify-center">
  <!--small link button-->
  <div class="my-4 flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 px-3 py-1 bg-transprent text-xs font-bold text-blue-500 uppercase focus:outline-none">
      link button
    </button>
    <button class="outline-none mr-1 mb-1 px-3 py-1 bg-transparent text-xs font-bold text-blue-500 uppercase focus:outline-none">
      <i class="fa fa-heart"></i>
      link button
    </button>
    <button class="outline-none mr-1 mb-1 px-3 py-1 bg-transparent text-xs font-bold text-blue-500 uppercase focus:outline-none">
      <i class="fa fa-heart"></i>
    </button>
  </div>
  <!--regular link button-->
  <div class="my-4 flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 px-6 py-2 bg-transprent text-sm font-bold text-blue-500 uppercase focus:outline-none">
      link button
    </button>
    <button class="outline-none mr-1 mb-1 px-6 py-2 bg-transparent text-sm font-bold text-blue-500 uppercase focus:outline-none">
      <i class="fa fa-heart"></i>
      link button
    </button>
    <button class="outline-none mr-1 mb-1 px-6 py-2 bg-transparent text-sm font-bold text-blue-500 uppercase focus:outline-none">
      <i class="fa fa-heart"></i>
    </button>
  </div>
  <!--large link button-->
  <div class="my-4 flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 px-8 py-3 bg-transprent text-base font-bold text-blue-500 uppercase focus:outline-none">
      link button
    </button>
    <button class="outline-none mr-1 mb-1 px-8 py-3 bg-transparent text-base font-bold text-blue-500 uppercase focus:outline-none">
      <i class="fa fa-heart"></i>
      link button
    </button>
    <button class="outline-none mr-1 mb-1 px-8 py-3 bg-transparent text-base font-bold text-blue-500 uppercase focus:outline-none">
      <i class="fa fa-heart"></i>
    </button>
  </div>
  <!--different size link button-->
  <div class="my-4">
    <button class="inline-block align-baseline outline-none mr-1 mb-1 px-3 py-1 bg-transprent text-xs font-bold text-blue-500 uppercase focus:outline-none">
      small link button
    </button>
    <button class="inline-block align-baseline outline-none mr-1 mb-1 px-6 py-2 bg-transparent text-sm font-bold text-blue-500 uppercase focus:outline-none">
      regular link button
    </button>
    <button class="inline-block align-baseline outline-none mr-1 mb-1 px-8 py-3 bg-transparent text-base font-bold text-blue-500 uppercase focus:outline-none">
      large link button
    </button>
  </div>
</div>