Skill ID: StylingCommonParts_11
Description: Design a rectangle with text that looks like a standard button.
Where to apply: "Submit" buttons, "Learn More" links, any action trigger.
Key Tailwind Classes:
bg-blue-500
text-white
py-2
px-4
Gotcha:
Using a
<div>
styled like a button. For accessibility and proper web behavior, use an actual
<button>
element or an
<a>
tag (for links). A styled
<div>
isn't keyboard-focusable or announced as a button by screen readers by default.
This is how the classes might be applied to an actual button element:
<button class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition ease-in-out duration-150">
Example Button
</button>
Note: The example button includes additional classes like
rounded-md
, hover, focus, and transition states for a more complete user experience, which build upon the basic styling classes specified above.