Tailwind Outline Button

默认样式和字体图标资源

<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">

代码在线地址

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

轮廓按钮（outline button）

outline button

<button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-4 py-2 bg-transparent text-xs text-red-500 font-bold uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">

• 轮廓按钮背景为透明，选中后反色显示。
• 轮廓按钮仅显示边框线和同色文本的按钮
• 轮廓按钮没有阴影效果
• 类名写法根据盒子模型由外向内
• 颜色均采用中度为默认标准
• 按钮内边距宽高比默认2:1
• 按钮没有外边框

样式	属性
outline-none	outline:0;
mr-1, mb-1	margin-right:.25rem; margin-bottom:.25rem;
border border-solid border-red-500 rounded	border:1px solid #f56565; border-radius:.25rem;
px-4 py-2	padding-left:1rem; padding-right:1rem; padding-top:.5rem; padding-bottom:.5rem;
bg-transparent	background-color:transparent;
text-xs font-bold text-red-500 uppercase	font-size:.125rem;font-weight:700;color:#f56565;text-transform:uppercase;

伪类	样式	属性
focus	outline-none	outline:0
active	bg-red-600	background-color:#e53e3e;
hover	bg-red-600 text-white	background-color:#e53e3e;; color:white;

尺寸大小

size

标识	尺寸	属性
small	小型	px-4 py-2 text-xs
regular	普通	px-6 py-3 text-sm
large	大型	px-8 py-3 text-base

<button class="inline-block align-bottom outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-4 py-2 bg-transparent text-xs font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
  small
</button>
<button class="inline-block align-bottom outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-6 py-3 bg-transparent text-sm font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
  regular
</button>
<button class="inline-block align-bottom outline-none mr-1 mb-1 border border-solid border-red-600 rounded px-8 py-3 bg-transparent text-base font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">      
  large
</button>

小型轮廓按钮（small outline button）

small outline button

<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">
  <div class="my-4 flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-4 py-2 bg-transparent text-xs text-red-500 font-bold uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      button
    </button>
  <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-4 py-2 bg-transparent text-xs text-red-500 font-bold uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease;">
    <i class="fa fa-heart"></i>
    button
  </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-4 py-2 bg-transprent text-xs text-red-500 font-bold uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease;">
      <i class="fa fa-heart"></i>
    </button>
  </div>
  <div class="my-4 flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded-full px-4 py-2 bg-transparent text-xs text-red-500 font-bold uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease;">
      button
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded-full px-4 py-2 bg-transparent text-xs text-red-500 font-bold uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
      button
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded-full px-4 py-2 bg-transparent text-xs text-red-500 font-bold uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
    </button>
  </div>
</div>

普通轮廓按钮（regular outline button）

regular outline button

<!--regular outline button-->
<div class="flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-6 py-3 bg-transparent text-sm font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      regular
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-6 py-3 bg-transparent text-sm font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
      regular
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-600 rounded px-6 py-3 bg-transparent text-sm font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
    </button>
</div>

<!--regular round full outline button-->
<div class="flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded-full px-6 py-3 bg-transparent text-sm font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      regular
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded-full px-6 py-3 bg-transparent text-sm font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
      regular
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-600 rounded-full px-6 py-3 bg-transparent text-sm font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
    </button>
</div>

大型轮廓按钮（large outline button）

large outline button

<!--large round outline button-->
<div class="flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-8 py-3 bg-transparent text-base font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      regular
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded px-8 py-3 bg-transparent text-base font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
      regular
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-600 rounded px-8 py-3 bg-transparent text-base font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
    </button>
</div>

<!--large round full outline button-->
<div class="flex flex-row items-center justify-center">
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded-full px-8 py-3 bg-transparent text-base font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      regular
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-500 rounded-full px-8 py-3 bg-transparent text-base font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
      regular
    </button>
    <button class="outline-none mr-1 mb-1 border border-solid border-red-600 rounded-full px-8 py-3 bg-transparent text-base font-bold text-red-500 uppercase focus:outline-none active:bg-red-600 hover:bg-red-600 hover:text-white" style="transition:all .15s ease">
      <i class="fa fa-heart"></i>
    </button>
</div>