windi css button examples

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>
Windi CSS Button v1

Windi CSS Button v1


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>
Windi CSS Outline buttons v1

Windi CSS Outline buttons v1


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>
Windi CSS button (small, base, large) size.

Windi CSS button (small, base, large) size.