<div class="container">
<div class="row">
<div class="column">
<button class="button" style="background: linear-gradient(to right, #ff7e5f,rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 15px 30px;" 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 class="column">
<button class="button" style="background: linear-gradient(to right,rgb(95, 255, 124),rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 15px 30px;" 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 class="column">
<button class="button" style="background: linear-gradient(to right,rgb(176, 223, 192),rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 15px 30px;" 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 class="column">
<button class="button" style="background: linear-gradient(to right,rgb(182, 180, 184),rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 15px 30px;" 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 class="column">
<button class="button" style="background: linear-gradient(to right,rgb(100, 67, 191),rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 15px 30px;" 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 class="column">
<button class="button" style="background: linear-gradient(to right,rgb(183, 0, 255),rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 15px 30px;" 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 class="column">
<button class="button" style="background: linear-gradient(to right,rgb(255, 27, 221),rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 15px 30px;" 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 class="column">
<button class="button" style="background: linear-gradient(to right,rgb(219, 253, 23),rgb(6, 6, 6)); font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 15px 30px;" 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>