By using Tailwind CSS, you can easily create beautiful, professional buttons with text and icons inside. For the vast majority of use cases, we can do like so:
<button class="flex space-x-2 items-center>
<!-- use SVG, PNG, or an Icon here -->
<span>
<!-- Text Here -->
</span>
</button>The flex and items-center utility classes help align text and the icon side by side horizontally. The space-x-2 utility adds some space between the text and the icon (you can add more or less space as needed). Furthermore, you can add shadow, background color, padding, border, etc, to your button to make it more vivid and attractive.
For more clarity, see the practical example below.
Example
Screenshot:
The code:
<body>
<div class="flex items-center space-x-4 p-20">
<!-- Delete button -->
<button class="flex space-x-2 items-center px-3 py-2 bg-rose-500 hover:bg-rose-800 rounded-md drop-shadow-md">
<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20"
viewBox="0 0 24 24">
<path
d="M 10 2 L 9 3 L 3 3 L 3 5 L 21 5 L 21 3 L 15 3 L 14 2 L 10 2 z M 4.3652344 7 L 5.8925781 20.263672 C 6.0245781 21.253672 6.877 22 7.875 22 L 16.123047 22 C 17.121047 22 17.974422 21.254859 18.107422 20.255859 L 19.634766 7 L 4.3652344 7 z">
</path>
</svg>
<span class="text-white">Delete</span>
</button>
<!-- Search button -->
<button
class="flex space-x-3 items-center px-5 py-3 bg-indigo-500 hover:bg-indigo-800 rounded-full drop-shadow-md">
<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20"
viewBox="0 0 30 30">
<path
d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z">
</path>
</svg>
<span class="text-white text-xl font-bold">Search</span>
</button>
<!-- Edit Button -->
<button
class="flex space-x-2 items-center px-4 py-2 bg-green-600 hover:bg-amber-600 rounded-full drop-shadow-md">
<svg class="fill-white" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20"
viewBox="0 0 50 50">
<path
d="M 46.574219 3.425781 C 45.625 2.476563 44.378906 2 43.132813 2 C 41.886719 2 40.640625 2.476563 39.691406 3.425781 C 39.691406 3.425781 39.621094 3.492188 39.53125 3.585938 C 39.523438 3.59375 39.511719 3.597656 39.503906 3.605469 L 4.300781 38.804688 C 4.179688 38.929688 4.089844 39.082031 4.042969 39.253906 L 2.035156 46.742188 C 1.941406 47.085938 2.039063 47.453125 2.292969 47.707031 C 2.484375 47.898438 2.738281 48 3 48 C 3.085938 48 3.171875 47.988281 3.257813 47.964844 L 10.746094 45.957031 C 10.917969 45.910156 11.070313 45.820313 11.195313 45.695313 L 46.394531 10.5 C 46.40625 10.488281 46.410156 10.472656 46.417969 10.460938 C 46.507813 10.371094 46.570313 10.308594 46.570313 10.308594 C 48.476563 8.40625 48.476563 5.324219 46.574219 3.425781 Z M 45.160156 4.839844 C 46.277344 5.957031 46.277344 7.777344 45.160156 8.894531 C 44.828125 9.222656 44.546875 9.507813 44.304688 9.75 L 40.25 5.695313 C 40.710938 5.234375 41.105469 4.839844 41.105469 4.839844 C 41.644531 4.296875 42.367188 4 43.132813 4 C 43.898438 4 44.617188 4.300781 45.160156 4.839844 Z M 5.605469 41.152344 L 8.847656 44.394531 L 4.414063 45.585938 Z">
</path>
</svg>
<span class="text-white text-md">Edit</span>
</button>
</div>
</body>Code explained:
- The
<div>element inside the<body>element has classes offlex,items-center,space-x-4, andp-20, which make the element a flex container, align its children vertically in the center, add a horizontal space of 4 units between its children, and add a padding of 20 units around its content. - The
<button>elements inside the<div>element are the three buttons. Each button has classes offlex,space-x-2orspace-x-3,items-center,px-3orpx-4orpx-5,py-2orpy-3,bg-rose-500orbg-indigo-500orbg-green-600,hover:bg-rose-800orhover:bg-indigo-800orhover:bg-amber-600,rounded-mdorrounded-full, anddrop-shadow-md, which make the button a flex container, add a horizontal space of 2 or 3 units between its children, align its children vertically in the center, add a horizontal padding of 3 or 4 or 5 units and a vertical padding of 2 or 3 units, set the background color to rose or indigo or green, change the background color on hover to rose or indigo or amber, make the border radius medium or full, and add a drop shadow effect. - The
<svg>elements inside the<button>elements are the icons. Each icon has a class offill-white, which sets the fill color to white. The icons also have attributes ofxmlns,x,y,width,height, andviewBox, which define the XML namespace, the position, the size, and the coordinate system of the icon. The icons also have a<path>element inside, which defines the shape of the icon using adattribute with a series of commands and parameters. - The
<span>elements inside the<button>elements are the texts. Each text has classes oftext-white,text-xlortext-md,font-boldor nothing, which set the text color to white, the text size to extra large or medium, and the font weight to bold or normal.
The code uses SVGs instead of PNGs or icons because SVGs are scalable vector graphics, which means they can be resized without losing quality or becoming pixelated. SVGs are also more flexible and customizable than PNGs or icons, as they can be styled and animated with CSS or JavaScript. SVGs are also more efficient and lightweight than PNGs or icons, as they are text-based and can be compressed easily.
