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>

按钮图标

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>