Arrow Right More Button
#button-005-ArrowRightMore
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<style type="text/tailwindcss">
.content {
@apply relative;
}
.btn {
@apply relative px-20 py-2.5 border border-black dark:border-white dark:text-white after:top-0 after:right-1 after:absolute after:w-[1px] after:h-full dark:after:bg-white after:bg-black after:transition-all after:duration-300 before:top-0 before:left-1 before:absolute before:w-[1px] before:h-full dark:before:bg-white before:bg-black before:transition-all before:duration-300;
}
.content:hover .btn {
@apply after:right-0 before:left-0 after:opacity-0 before:opacity-0;
}
.arrow-content {
@apply absolute top-1/2 -translate-y-1/2 -left-6 transition-all duration-300;
}
.content:hover .arrow-content {
@apply -left-5;
}
.icon {
@apply w-14 stroke-black dark:stroke-white;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<div class=" group content">
<button class=" btn">
MORE
</button>
<div class="arrow-content">
<svg class="icon" viewBox="0 0 96 49" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M72.0133 5.5L91.16 24.6467M91.16 24.6467L72.0133 43.7933M91.16 24.6467H5" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</body>
</html>