JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<nav><ul>
<li id="menu-item-38581" class="jointoday_button menu-item menu-item-type-custom menu-item-object-custom menu-item-38581"><a href="https://www.thewordcracker.com/forum/support-system">문의</a></li>
</ul>
</nav>

<nav class="is_stuck"><ul>
<li id="menu-item-38581" class="jointoday_button menu-item menu-item-type-custom menu-item-object-custom menu-item-38581"><a href="https://www.thewordcracker.com/forum/support-system">문의</a></li>
</ul>
</nav>

CSS

nav:not(.is_stuck) .jointoday_button a {
		background: linear-gradient(135deg, #007bff, #6699ff, #b3d1ff) !important;
		padding: 12px 30px !important;
		font-size: 18px;
		color: #ffffff !important;
		border-radius: 50px !important;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: background 0.3s ease, box-shadow 0.3s ease !important;
		border: none !important;
		box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
		text-decoration: none;
		display: inline-block;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 1.2em !important;
		vertical-align: middle;
	}

	nav:not(.is_stuck) .jointoday_button a:hover, 
	nav:not(.is_stuck) .jointoday_button a:focus {
		background: linear-gradient(135deg, #b3d1ff, #6699ff, #007bff) !important;
		box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
	}

	nav.is_stuck .jointoday_button a {
		background: linear-gradient(135deg, #0056b3, #3366cc, #809fff) !important;
		padding: 12px 30px !important;
		font-size: 18px;
		color: #ffffff !important;
		border-radius: 50px !important;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: background 0.3s ease, box-shadow 0.3s ease !important;
		border: none !important;
		box-shadow: 0 4px 6px rgba(0, 86, 179, 0.2);
		text-decoration: none;
		display: inline-block;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 0.8em !important;
		vertical-align: middle;
	}

	nav.is_stuck .jointoday_button a:hover, 
	nav.is_stuck .jointoday_button a:focus {
		background: linear-gradient(135deg, #809fff, #3366cc, #0056b3) !important;
		box-shadow: 0 6px 12px rgba(0, 86, 179, 0.3);
	}