Buttons, widely called CTAs in tech are backbones for engineers to make user interact easily and navigate different section with a click 👆
<div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700">
lets play
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">
Learn more
</a>
</div>
</div>
</div>
</div><div id="dropdown" class="m-5 inline-block">
<button onclick="toggle()"
class="inline-flex justify-center text-center items-center rounded-md border border-transparent bg-indigo-600 px-5 py-2 text-base font-medium text-white hover:bg-indigo-700">
Dropdown
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 ml-2">
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" />
</svg>
</button>
<div id="menu" class="hidden flex flex-col bg-white drop-shadow-md">
<a class="px-5 py-3 hover:bg-gray-100 border-b border-gray-200" href="#">Option1</a>
<a class="px-5 py-3 hover:bg-gray-100 border-b border-gray-200" href="#">Option2</a>
<a class="px-5 py-3 hover:bg-gray-100 border-b border-gray-200" href="#">Option3</a>
<a class="px-5 py-3 hover:bg-gray-100" href="#">Option4</a>
</div>
</div>
<script>
var menu = document.getElementById("menu");
function toggle() {
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
} else {
menu.classList.add('hidden');
}
}
window.onclick = function (event) {
var dropdown = document.getElementById('dropdown');
if (!dropdown.contains(event.target) && !menu.classList.contains('hidden')) {
menu.classList.add('hidden');
}
}
</script><div class='bg-gray-50'>
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class='mt-8'>
<button
class='bg-orange-100 hover:bg-orange-200 font-medium text-base border-transparent px-6 py-4 rounded-md flex flex-row items-center gap-4 text-red-500'>
<a
href='#'
>
See more
</a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-4 h-4 font-medium">
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
</div>
</div>
<div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-sm border border-transparent bg-red-200 px-5 py-3 text-base font-medium text-red-500 hover:bg-indigo-700">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</span>
Delete
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50">
Learn more
</a>
</div>
</div>
</div>
</div><div class='bg-gray-50'>
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class='mt-8'>
<button
class='bg-blue-500 hover:bg-blue-800 font-medium text-base border-transparent px-6 py-4 rounded-full flex flex-row items-center gap-4 text-white shadow'>
<a
href='#'
>
Download Now
</a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
</svg>
</button>
</div>
</div>
</div>
<div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-sm border border-blue-400 bg-blue-200 px-5 py-3 text-base font-medium text-blue-500 hover:bg-blue-200">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>
</span>
Setting
</a>
</div>
</div>
</div>
</div><div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-full border-2 border-black hover:border-gray-300">
<a
href="#"
class="inline-flex flex-col items-center justify-center rounded-full border border-transparent font-bold gap-1 w-28 h-28 hover:bg-gray-200 text-base text-xs">
<span class="mx-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
</svg>
</span>
<div>Scroll</div>
</a>
</div>
</div>
</div>
</div>
</div><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<div class="h-screen bg-gray-200 flex flex-col">
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-xl bg-blue-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-white" id="play-btn"></i>
</button>
</div>
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-full bg-blue-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-white" id="play-btn"></i>
</button>
</div>
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-xl border-2 border-blue-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-blue-500" id="play-btn"></i>
</button>
</div>
<div class="flex h-screen items-center justify-center">
<button class="h-24 w-24 rounded-full border-2 border-blue-500 focus:outline-none" onclick="play();">
<i class="fa fa-play fa-2x text-blue-500" id="play-btn"></i>
</button>
</div>
</div>
</body>
<div class="flex items-center justify-center w-screen h-screen bg-white">
<form method="GET">
<div class="relative text-black focus-within:text-gray-400">
<span class="absolute inset-y-0 right-0 flex items-center pr-2">
<div class="border-l-2 border-solid border-amber-800 h-4 pr-1"></div>
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</span>
<input type="search" name="q" class="py-3 text-sm w-32 text-black placeholder:text-black bg-amber-500 rounded-full pl-5 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Search..." autocomplete="off">
</div>
</form>
</div><div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-sm border border-transparent bg-green-300 px-5 py-3 text-base font-medium text-black-500 hover:bg-green-500">
Learn More
</a>
</div>
</div>
</div>
</div><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<div class="flex flex-row items-center justify-center w-screen h-screen">
<div class="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full shadow-xl shadow-gray-400 float-left overflow-hidden cursor-pointer">
<div class="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#4267B2]">
<i class="fab fa-facebook-f text-2xl leading-[60px] transition-all ease-out text-white"></i>
</div>
<span class="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#4267B2]">Facebook</span>
</div>
<div class="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full shadow-xl shadow-gray-400 float-left overflow-hidden cursor-pointer">
<div class="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#1DA1F2]">
<i class="fab fa-twitter text-2xl leading-[60px] transition-all ease-out text-white"></i>
</div>
<span class="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#1DA1F2]">Twitter</span>
</div>
<div class="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full shadow-xl shadow-gray-400 float-left overflow-hidden cursor-pointer">
<div class="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#E1306C]">
<i class="fab fa-instagram text-2xl leading-[60px] transition-all ease-out text-white"></i>
</div>
<span class="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#E1306C]">Instagram</span>
</div>
<div class="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full shadow-xl shadow-gray-400 float-left overflow-hidden cursor-pointer">
<div class="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#333]">
<i class="fab fa-github text-2xl leading-[60px] transition-all ease-out text-white"></i>
</div>
<span class="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#333]">Github</span>
</div>
<div class="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full shadow-xl shadow-gray-400 float-left overflow-hidden cursor-pointer">
<div class="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#ff0000]">
<i class="fab fa-youtube text-2xl leading-[60px] transition-all ease-out text-white"></i>
</div>
<span class="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#ff0000]">YouTube</span>
</div>
<div class="group m-3 inline-block h-16 w-16 py-0 hover:w-52 transition-all ease-out bg-white rounded-full shadow-xl shadow-gray-400 float-left overflow-hidden cursor-pointer">
<div class="inline-block h-16 w-16 text-center bg-zinc-900 transition-all ease-out box-border rounded-full leading-[65px] group-hover:bg-[#0A66C2]">
<i class="fab fa-linkedin text-2xl leading-[60px] transition-all ease-out text-white"></i>
</div>
<span class="text-xl font-medium ml-2 leading-[65px] transition-all ease-out group-hover:text-[#0A66C2]">Linkedin</span>
</div>
</div><div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Ready to dive in?</span>
<span class="block text-indigo-600">Start your free trial today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a
href="#"
class="inline-flex items-center justify-center rounded-sm border border-transparent bg-red-200 px-5 py-3 text-base font-medium text-red-500 hover:bg-indigo-700">
<span class="mx-2">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5 5.7662L26.8762 19.7174C28.08 21.7212 27.4888 24.3574 25.555 25.6049C24.906 26.0252 24.1494 26.2492 23.3763 26.2499H6.6225C4.34625 26.2499 2.5 24.3374 2.5 21.9762C2.5 21.1774 2.71625 20.3962 3.1225 19.7174L11.5 5.7662C12.7025 3.76245 15.245 3.14869 17.1788 4.39619C17.7138 4.74119 18.1663 5.20995 18.5 5.7662ZM15.725 6.81494C15.572 6.71652 15.4006 6.65013 15.2212 6.61979C15.0418 6.58946 14.8581 6.5958 14.6812 6.63844C14.5043 6.68109 14.3379 6.75914 14.192 6.8679C14.0462 6.97665 13.9239 7.11385 13.8325 7.27119L5.45625 21.2249C5.32019 21.4523 5.24846 21.7124 5.24875 21.9774C5.24875 22.7649 5.86375 23.4024 6.62375 23.4024H23.375C23.6325 23.4024 23.8838 23.3274 24.1013 23.1874C24.4134 22.9801 24.6334 22.6603 24.7156 22.2947C24.7978 21.9291 24.7358 21.5459 24.5425 21.2249L16.1662 7.27119C16.0564 7.08747 15.9059 6.93139 15.7263 6.81494H15.725ZM15 21.2499C14.6685 21.2499 14.3505 21.1182 14.1161 20.8838C13.8817 20.6494 13.75 20.3315 13.75 19.9999C13.75 19.6684 13.8817 19.3505 14.1161 19.1161C14.3505 18.8816 14.6685 18.7499 15 18.7499C15.3315 18.7499 15.6495 18.8816 15.8839 19.1161C16.1183 19.3505 16.25 19.6684 16.25 19.9999C16.25 20.3315 16.1183 20.6494 15.8839 20.8838C15.6495 21.1182 15.3315 21.2499 15 21.2499ZM15 9.99995C15.3315 9.99995 15.6495 10.1316 15.8839 10.3661C16.1183 10.6005 16.25 10.9184 16.25 11.2499V16.2499C16.25 16.5815 16.1183 16.8994 15.8839 17.1338C15.6495 17.3682 15.3315 17.4999 15 17.4999C14.6685 17.4999 14.3505 17.3682 14.1161 17.1338C13.8817 16.8994 13.75 16.5815 13.75 16.2499V11.2499C13.75 10.9184 13.8817 10.6005 14.1161 10.3661C14.3505 10.1316 14.6685 9.99995 15 9.99995V9.99995Z" fill="#F24E1E"/>
</svg>
</span>
Report
</a>
</div>
</div>
</div>
</div><div class='bg-gray-50 flex'>
<div class="m-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
<!-- button component starts from here -->
<button
class="bg-left-top font-medium text-base border-transparent bg-repeat px-6 py-4 rounded-full flex flex-row items-center gap-4 text-white shadow overflow-hidden" style="background-image: repeating-linear-gradient(-45deg,
#8b6ce8 10px 40px,
#b2f7ef 40px 100px,
#eff7f6 100px 150px,
#f7d6e0 150px 200px,
#df8ad4 200px 250px
)">
<a
href='#'
class="text-black"
>
Get Started
</a>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
<!-- button component -->
</div>
</div>
<div class="flex gap-3">
<!-- Left -->
<a href="#">
<div class="bg-[#1855CB] p-3 rounded-md shadow flex justify-center items-center hover:bg-slate-700 duration-200">
<svg class="w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5" stroke="#FEFEFF">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</div>
</a>
<!-- Right -->
<a href="#">
<div class="bg-[#1855CB] p-3 rounded-md shadow-sm flex justify-center items-center hover:bg-slate-700 duration-200">
<svg class="w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5" stroke="#FEFEFF">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</a>
</div>
<!-- Round Icons -->
<div class="flex gap-3">
<!-- Left -->
<a href="#">
<div class="bg-[#1855CB] p-3 rounded-full shadow-sm flex justify-center items-center hover:bg-slate-700 duration-200">
<svg class="w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5" stroke="#FEFEFF">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</div>
</a>
<!-- Right -->
<a href="#">
<div class="bg-[#1855CB] p-3 rounded-full shadow-sm flex justify-center items-center hover:bg-slate-700 duration-200">
<svg class="w-10 h-10"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5" stroke="#FEFEFF">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</a>
</div>