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

• 内边距宽高比为 2:1
• 填充色均采用中度为基准

小型填充按钮（small filled button）

• 小型填充按钮内边距采用px-4 py-2

small filled button

源代码：https://codepen.io/junchow/pen/rNOXWPY?editors=1000

基础按钮

仅带文本的基础按钮

small filled button

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

样式	属性
px-4	padding-left:1rem; padding-right:1rem;
py-2	padding-top:0.5rem; padding-bottom:0.5rem;
mr-1	margin-right:0.25rem;
mb-1	margin-bottom:0.25rem;
bg-gray-500	background-color:#a0aec0;
outline-none	outline:0;
rounded	border-radius:0.25rem;
shadow	box-shadow:0 1px 3px 0 rgba(0, 0, 0, 1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
text-white	color:#ffffff;
text-xs	font-size:.75rem;
font-bold	font-weight:700;
uppercase	text-transform:uppercase;
focus:outline-none	:focus{outline:0;}
hover:shadow-md	:hover{shadow:none;}
active:bg-gray-600	:active{background-color:#718096;}

按钮图标

icon text button

由图标和文本组合的按钮

icon button

<button class="px-4 py-2 mr-1 mb-1 bg-blue-500 outline-none rounded shadow text-white text-xs font-bold uppercase focus:outline-none hover:shadow-md active:bg-blue-600" type="button" type="transition:all .15s ease">
  <i class="fa fa-plus"></i>
  add
</button>

仅带图标的按钮

icon text button

<button class="px-4 py-2 mr-1 mb-1 bg-blue-500 outline-none rounded shadow text-white text-xs font-bold uppercase focus:outline-none hover:shadow-md active:bg-blue-600" type="button" type="transition:all .15s ease">
  <i class="fa fa-plus"></i>
</button>

椭圆按钮

在小型填充按钮的基础上将rouned圆角修改为rounded-full即可。

round button

<button class="px-4 py-2 mr-1 mb-1 bg-blue-500 outline-none rounded-full shadow text-white text-xs font-bold uppercase focus:outline-none hover:shadow-md active:bg-blue-600" type="button" style="transition:all .15s ease">button</button>

<button class="px-4 py-2 mr-1 mb-1 bg-blue-500 outline-none rounded-full shadow text-white text-xs font-bold uppercase focus:outline-none hover:shadow-md active:bg-blue-600" type="button" style="transition:all .15s ease">
  <i class="fa fa-plus"></i>
  button
</button>

<button class="px-4 py-2 mr-1 mb-1 bg-blue-500 outline-none rounded-full shadow text-white text-xs font-bold uppercase focus:outline-none hover:shadow-md active:bg-blue-600" type="button" style="transition:all .15s ease">
  <i class="fa fa-plus"></i>
</button>

常规填充按钮（regular filled button）

• 常规填充按钮内边距采用px-6 py-3

regular filled button

<button class="px-6 py-3 mr-1 mb-1 bg-gray-500 text-white text-sm font-bold uppercase rounded shadow outline-none focus:outline-none active:bg-gray-600 hover:shadow-lg" type="button" style="transition:all .15s ease">button</button>

常规填充按钮样式

regular filled 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="m-4 flex flex-row items-center justify-center">
    <button class="px-6 py-3 mr-1 mb-1 bg-gray-500 text-white text-sm font-bold uppercase rounded shadow outline-none focus:outline-none active:bg-gray-600 hover:shadow-lg" type="button" style="transition:all .15s ease">
      button
    </button>
    
    <button class="px-6 py-3 mr-1 mb-1 bg-blue-500 text-white text-sm font-bold uppercase rounded shadow outline-none focus:outline-none active:bg-blue-600 hover:shadow-lg" type="button" style="transition:all .15s ease">
      <i class="fa fa-plus"></i>
      button
    </button>
    
    <button class="px-6 py-3 mr-1 mb-1 bg-red-500 text-white text-sm font-bold uppercase rounded shadow outline-none focus:outline-none active:bg-red-600 hover:shadow-lg" type="button" style="transition:all .15s ease">
      <i class="fa fa-user"></i>
    </button>
  </div>
  <div class="m-4 flex flex-row items-center justify-center">
    <button class="px-6 py-3 mr-1 mb-1 bg-teal-500 text-white text-sm font-bold uppercase rounded-full shadow outline-none focus:outline-none active:bg-teal-600 hover:shadow-lg" type="button" style="transition:all .15s ease">
      button
    </button>
    
    <button class="px-6 py-3 mr-1 mb-1 bg-yellow-500 text-white text-sm font-bold uppercase rounded-full shadow outline-none focus:outline-none active:bg-yellow-600 hover:shadow-lg" type="button" style="transition:all .15s ease">
      <i class="fa fa-plus"></i>
      button
    </button>
    
    <button class="px-6 py-3 mr-1 mb-1 bg-green-500 text-white text-sm font-bold uppercase rounded-full shadow outline-none focus:outline-none active:bg-green-600 hover:shadow-lg" type="button" style="transition:all .15s ease">
      <i class="fa fa-user"></i>
    </button>
  </div>
</div>

大型填充按钮（large filled button）

• 大型填充按钮内边距为px-8 py-3
• 大型填充按钮字体使用text-base
• 大型填充按钮阴影采用shadow-md

large filled 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 rounded px-8 py-3 bg-blue-500 text-base text-white font-bold uppercase shadow-md focus:outline-none active:bg-blue-600 hover:shadow-lg" style="transition:all .15s ease">
      button
    </button>
    
    <button class="outline-none mr-1 mb-1 rounded px-8 py-3 bg-blue-500 text-base text-white font-bold uppercase shadow-md focus:outline-none active:bg-blue-600 hover:shadow-lg" style="transition:all .15s ease">
      <i class="fa fa-pen"></i>
      button
    </button>
    
    <button class="outline-none mr-1 mb-1 rounded px-8 py-3 bg-blue-500 text-base text-white font-bold uppercase shadow-md focus:outline-none active:bg-blue-600 hover:shadow-lg" style="transition:all .15s ease">
      <i class="fa fa-pen"></i>
    </button>
  </div>
  <div class="my-4 flex flex-row items-center justify-center">
    <button class="outline-none px-8 py-3 rounded-full mr-1 mb-1 bg-blue-500 text-base text-white font-bold uppercase shadow-md focus:outline-none active:bg-blue-600 hover:shadow-lg" style="transition:all .15s ease">
      button
    </button>
    
    <button class="outline-none px-8 py-3 rounded-full mr-1 mb-1 bg-blue-500 text-base text-white font-bold uppercase shadown-md focus:outline-none active:bg-blue-600 hover:shadow-lg" style="transition:all .15s ease">
      <i class="fa fa-pen"></i>
      button
    </button>
    
    <button class="outline-none px-8 py-3 rounded-full mr-1 mb-1 bg-blue-500 text-base text-white font-bold uppercase shadow-md focus:outline-none active:bg-blue-600 hover:shadow-lg" style="transition:all .15s ease">
      <i class="fa fa-pen"></i>
    </button>
  </div>
</div>