In this section we will create button ui with windicss, windicss button component, wind css outline button, button size with Windi CSS. Before we start you should install windicss.
Install Windi CSS with Windi CLI
Or use windicss cdn
<script src="https://unpkg.com/windicss-runtime-dom"></script>
Example 1
Simple windicss button with hover effect.
<button class="px-6 py-2 bg-gray-500 font-medium text-sm hover:bg-gray-600 text-gray-100 rounded">
Button
</button>
<button class="px-6 py-2 bg-blue-500 font-medium text-sm hover:bg-blue-600 text-blue-100 rounded">
Button
</button>
<button class="px-6 py-2 bg-green-500 font-medium text-sm hover:bg-green-600 text-green-100 rounded">
Button
</button>
<button class="px-6 py-2 bg-indigo-500 font-medium text-sm hover:bg-indigo-600 text-indigo-100 rounded">
Button
</button>
<button class="px-6 py-2 bg-yellow-500 font-medium text-sm hover:bg-yellow-600 text-yellow-100 rounded">
Button
</button>
<button class="px-6 py-2 bg-red-500 font-medium text-sm hover:bg-red-600 text-red-100 rounded">
Button
</button>
<button class="px-6 py-2 bg-gray-50 font-medium text-sm hover:bg-gray-100 text-black rounded">
Button
</button>
<button class="px-6 py-2 bg-gray-800 font-medium text-sm hover:bg-gray-900 text-white rounded">
Button
</button>
Windi CSS button with attributify mode.
<button
bg="gray-500 hover:gray-600"
text="sm gray-100"
font="font-medium"
p="y-2 x-6"
border="rounded"
>
Button
</button>
<button
bg="blue-500 hover:blue-600"
text="sm blue-100"
font="font-medium"
p="y-2 x-6"
border="rounded"
>
Button
</button>
<button
bg="green-500 hover:green-600"
text="sm green-100"
font="font-medium"
p="y-2 x-6"
border="rounded"
>
Button
</button>
<button
bg="indigo-500 hover:indigo-600"
text="sm indigo-100"
font="font-medium"
p="y-2 x-6"
border="rounded"
>
Button
</button>
<button
bg="yellow-500 hover:yellow-600"
text="sm yellow-100"
font="font-medium"
p="y-2 x-6"
border="rounded"
>
Button
</button>
<button
bg="gray-50 hover:gray-100"
text="sm text-white"
font="font-medium"
p="y-2 x-6"
border="rounded"
>
Button
</button>
<button
bg="gray-800 hover:gray-900"
text="sm gray-100"
font="font-medium"
p="y-2 x-6"
border="rounded"
>
Button
</button>
Example 2
Windi CSS Outline buttons
<button class="px-6 py-2 border border-gray-500 font-medium text-sm hover:bg-gray-600 hover:text-gray-100 text-gray-600 rounded">
Button
</button>
<button class="px-6 py-2 border border-blue-500 font-medium text-sm hover:bg-blue-600 hover:text-blue-100 text-blue-600 rounded">
Button
</button>
<button class="px-6 py-2 border border-green-500 font-medium text-sm hover:bg-green-600 hover:text-green-100 text-green-600 rounded">
Button
</button>
<button class="px-6 py-2 border border-indigo-500 font-medium text-sm hover:bg-indigo-600 hover:text-indigo-100 text-indigo-600 rounded">
Button
</button>
<button class="px-6 py-2 border border-yellow-500 font-medium text-sm hover:bg-yellow-600 hover:text-yellow-100 text-yellow-600 rounded">
Button
</button>
<button class="px-6 py-2 border border-red-500 font-medium text-sm hover:bg-red-600 hover:text-red-100 text-red-600 rounded">
Button
</button>
<button class="px-6 py-2 border border-gray-800 font-medium text-sm hover:bg-gray-900 hover:text-gray-100 text-black rounded">
Button
</button>
Windi CSS Outline button with attributify mode.
<button
bg="hover:gray-600"
text="sm gray-600 hover:gray-100"
font="font-medium"
p="y-2 x-6"
border="1 gray-500 rounded"
>
Button
</button>
<button
bg="hover:blue-600"
text="sm blue-600 hover:blue-100"
font="font-medium"
p="y-2 x-6"
border="1 blue-500 rounded"
>
Button
</button>
<button
bg="hover:green-600"
text="sm green-600 hover:green-100"
font="font-medium"
p="y-2 x-6"
border="1 green-500 rounded"
>
Button
</button>
<button
bg="hover:indigo-600"
text="sm indigo-600 hover:indigo-100"
font="font-medium"
p="y-2 x-6"
border="1 indigo-500 rounded"
>
Button
</button>
<button
bg="hover:yellow-600"
text="sm yellow-600 hover:yellow-100"
font="font-medium"
p="y-2 x-6"
border="1 yellow-500 rounded"
>
Button
</button>
<button
bg="hover:red-600"
text="sm red-600 hover:red-100"
font="font-medium"
p="y-2 x-6"
border="1 red-500 rounded"
>
Button
</button>
<button
bg="hover:gray-600"
text="sm gray-600 hover:gray-100"
font="font-medium"
p="y-2 x-6"
border="1 gray-500 rounded"
>
Button
</button>
Example 3
Windi CSS button (small, base, large) size.
<button class="px-2 py-1 bg-gray-500 font-medium text-xs hover:bg-gray-600 text-gray-100 rounded">
Extra small
</button>
<button class="px-3 py-1.5 bg-blue-500 font-medium text-sm hover:bg-blue-600 text-blue-100 rounded">
Small
</button>
<button class="px-4 py-2 bg-green-500 font-medium text-base hover:bg-green-600 text-green-100 rounded">
Base
</button>
<button class="px-5 py-3 bg-indigo-500 font-medium text-lg hover:bg-indigo-600 text-indigo-100 rounded">
Large
</button>
<button class="px-8 py-3 bg-red-500 font-medium text-xl hover:bg-red-600 text-red-100 rounded">
Extra Large
</button>
Windi CSS button size with attributify mode.
<button
bg="gray-500 hover:gray-600"
text="xs gray-100"
font="font-medium"
p="y-1 x-2"
border="rounded"
>
Extra small
</button>
<button
bg="blue-500 hover:blue-600"
text="sm blue-100"
font="font-medium"
p="y-1.5 x-3"
border="rounded"
>
Small
</button>
<button
bg="green-500 hover:green-600"
text="base green-100"
font="font-medium"
p="y-2 x-4"
border="rounded"
>
Base
</button>
<button
bg="indigo-500 hover:indigo-600"
text="lg indigo-100"
font="font-medium"
p="y-3 x-5"
border="rounded"
>
Large
</button>
<button
bg="red-500 hover:red-600"
text="xl red-100"
font="font-medium"
p="y-3 x-8"
border="rounded"
>
Exatra Large
</button>