x
1
2
3
4
5
6
7
<button class="text-white bg-gradient-to-r from-cyan-500 to-cyan-500 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Cyan To Blue Gradient</button><button class="text-white bg-gradient-to-br from-green-400 to-cyan-600 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Green To Blue Gradient</button><button class="text-white bg-gradient-to-br from-pink-500 to-orange-400 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Pink To Orange Gradient</button><button class="text-white bg-gradient-to-br from-purple-600 to-cyan-500 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Purple To Blue Gradient</button><button class="text-white bg-gradient-to-r from-purple-500 to-pink-500 enabled:hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Purple To Pink Gradient</button><button class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Red To Yellow Gradient</button><button class="text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 enabled:hover:bg-gradient-to-l enabled:hover:from-teal-200 enabled:hover:to-lime-200 enabled:hover:text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36">Teal To Lime Gradient</button>1
2
3
4
5
6
7
<% %i{cyan_to_blue_gradient green_to_blue_gradient pink_to_orange_gradient purple_to_blue_gradient purple_to_pink_gradient red_to_yellow_gradient teal_to_lime_gradient}.each do |color| %> <%= fx_button( color: color, class: 'relative inline-flex mr-2 mb-5 w-36', with_content: color.to_s.titlecase ) %><% end %>No notes provided.
No params configured.