Tailwind Button

按钮组

input group

源代码查看地址

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

按钮组是由多个按钮水平排列而成，实现方式可分为两种，一种是依次设置左中右按钮的边框，一种是统一设置按钮的水平分割线。

左右结构 逐一设置边框

<div class="m-2 flex flex-row text-base text-gray-700 leading-5">
    <button class="px-4 py-2 border border-gray-600 rounded rounded-r-none bg-gray-100 cursor-pointer  focus:scale-110 focus:outline-none hover:bg-gray-200 transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-chevron-left"></i>
        <span class="ml-2">上页</span>
    </button>
    <button class="px-4 py-2 border border-gray-600 border-l-0 rounded rounded-l-none bg-gray-100 cursor-pointer focus:scale-110 focus:outline-none hover:bg-gray-200 transition duration-200 ease-in-out flex justify-center items-center">
        <span class="mr-2">下页</span>
        <i class="fa fa-chevron-right"></i>
    </button>
</div>

左右结构 设置分割线

<div class="m-2 flex flex-row border border-red-600 rounded divide-x divide-red-600 bg-red-100 text-base text-red-700 leading-5">
    <button class="px-4 py-2 cursor-pointer focus:scale-110 focus:outline-none hover:bg-red-200 hover:text-red-800 transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-chevron-left"></i>
        <span class="ml-2">后退</span>
    </button>
    <button class="px-4 py-2 cursor-pointer focus:scale-110 focus:outline-none hover:bg-red-200 hover:text-red-800 transition duration-200 ease-in-out flex justify-center items-center">
        <span class="mr-2">前进</span>
        <i class="fa fa-chevron-right"></i>
    </button>
</div>

左中右结构 逐个设置边框

<div class="m-2 flex flex-row text-base text-gray-700 leading-5">
    <button class="px-4 py-2 border border-gray-600 rounded rounded-r-none bg-gray-100 cursor-pointer  focus:scale-110 focus:outline-none hover:bg-gray-200 transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-download"></i>
        <span class="ml-2">下载</span>
    </button>
    <button class="px-4 py-2 border border-gray-600 border-l-0 bg-gray-100 cursor-pointer focus:scale-110 focus:outline-none hover:bg-gray-200 transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-upload"></i>
        <span class="ml-2">上传</span>
    </button>
    <button class="px-4 py-2 border border-gray-600 border-l-0 bg-gray-100 cursor-pointer focus:scale-110 focus:outline-none hover:bg-gray-200 transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-print"></i>
        <span class="ml-2">打印</span>
    </button>
    <button class="px-4 py-2 border border-gray-600 border-l-0 rounded rounded-l-none bg-gray-100 cursor-pointer focus:scale-110 focus:outline-none hover:bg-gray-200 transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-suitcase"></i>
        <span class="ml-2">压缩</span>
    </button>
</div>

左中右结构 统一设置边框与分割线

<div class="m-2 flex flex-row border border-blue-500 rounded bg-gray-100 divide-x divide-blue-500 text-base text-blue-600 leading-5">
    <button class="px-4 py-2 cursor-pointer bg-blue-400 text-white focus:scale-110 focus:outline-none hover:bg-blue-400 transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-plus"></i>
        <span class="ml-2">创建</span>
    </button>
    <button class="px-4 py-2 cursor-pointer focus:scale-110 focus:outline-none hover:bg-blue-400 hover:text-white transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-pen"></i>
        <span class="ml-2">编辑</span>
    </button>
    <button class="px-4 py-2 cursor-pointer focus:scale-110 focus:outline-none hover:bg-blue-400 hover:text-white transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-eye"></i>
        <span class="ml-2">查看</span>
    </button>
    <button class="px-4 py-2 cursor-pointer focus:scale-110 focus:outline-none hover:bg-blue-400 hover:text-white transition duration-200 ease-in-out flex justify-center items-center">
        <i class="fa fa-trash"></i>
        <span class="ml-2">删除</span>
    </button>
</div>

带过渡动画效果的填充按钮和边框按钮

Button Transition

填充按钮

<button class="transition duration-300 ease-in-out mr-1 mb-1 py-2 px-4 bg-purple-700 rounded text-white font-normal focus:outline-none focus:shadow-outline hover:bg-purple-900">
    button
</button>

边框按钮

<button class="transition duration-300 ease-in-out mr-1 mb-1 last:mr-0 py-2 px-4 bg-transparent border border-solid border-purple-700 rounded text-purple-700 font-normal focus:outline-none focus:shadow-outline hover:bg-purple-700 hover:text-white">
    button
</button>