默认样式和字体图标资源
<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>
网友评论