<div class="container py-5">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
<div>
<button class="btn w-full rounded-xl py-3 px-4 text-white font-bold uppercase" style="background: linear-gradient(to right, #ff7e5f, rgb(0, 0, 0));"
onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';"
onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
Gradient Button
</button>
</div>
<div>
<button class="btn w-full rounded-xl py-3 px-4 text-white font-bold uppercase" style="background: linear-gradient(to right, rgb(95, 255, 124), rgb(0, 0, 0));"
onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';"
onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
Gradient Button
</button>
</div>
<div>
<button class="btn w-full rounded-xl py-3 px-4 text-white font-bold uppercase" style="background: linear-gradient(to right, rgb(176, 223, 192), rgb(0, 0, 0));"
onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';"
onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
Gradient Button
</button>
</div>
<div>
<button class="btn w-full rounded-xl py-3 px-4 text-white font-bold uppercase" style="background: linear-gradient(to right, rgb(182, 180, 184), rgb(0, 0, 0));"
onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';"
onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
Gradient Button
</button>
</div>
<div>
<button class="btn w-full rounded-xl py-3 px-4 text-white font-bold uppercase" style="background: linear-gradient(to right, rgb(100, 67, 191), rgb(0, 0, 0));"
onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';"
onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
Gradient Button
</button>
</div>
<div>
<button class="btn w-full rounded-xl py-3 px-4 text-white font-bold uppercase" style="background: linear-gradient(to right, rgb(183, 0, 255), rgb(0, 0, 0));"
onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';"
onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
Gradient Button
</button>
</div>
<div>
<button class="btn w-full rounded-xl py-3 px-4 text-white font-bold uppercase" style="background: linear-gradient(to right, rgb(255, 27, 221), rgb(0, 0, 0));"
onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';"
onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
Gradient Button
</button>
</div>
<div>
<button class="btn w-full rounded-xl py-3 px-4 text-white font-bold uppercase" style="background: linear-gradient(to right, rgb(219, 253, 23), rgb(6, 6, 6));"
onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';"
onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">
Gradient Button
</button>
</div>
</div>
</div>