ScreenCraft Components

Buttons

Outline the purpose of these components here...

Button (sharp)


<button class="bg-gray-500 text-gray-100
               p-4 py-2
               hover:bg-gray-800 hover:text-white
               transition ease-in-out duration-500">
    Button
</button>

Button (Push In)


<button class="bg-gray-100 text-gray-500 border border-gray-500
               shadow shadow-gray-500/50
               p-4 py-2
               hover:shadow-none hover:text-black
               transition ease-in-out duration-500">
    Button
</button>

Button (With Icon)

This uses the FontAwesome Free icons.


<button class="bg-gray-100 text-gray-500 border border-gray-500
               p-4 py-2
               icon-before icon-home
               hover:bg-gray-800 hover:text-gray-200
               transition ease-in-out duration-500">
    Button
</button>

Button (Icon only)

This uses the FontAwesome Free icons.


<button class="bg-gray-800 text-gray-200
               p-4 py-2
               icon-before icon-home
               hover:bg-gray-200 hover:text-gray-800
               hover:shadow hover:shadow-inner hover:shadow-gray-400
               transition ease-in-out duration-500">
    <span class="sr-only>">
        Button
    </span>
</button>

Component Name

Component demo

<p>Component Code</p>