美文网首页
Tailwind Outline Button

Tailwind Outline Button

作者: JunChow520 | 来源:发表于2020-05-30 15:37 被阅读0次

默认样式和字体图标资源

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

相关文章

网友评论

      本文标题:Tailwind Outline Button

      本文链接:https://www.haomeiwen.com/subject/sfwczhtx.html