JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<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>

CSS

.jointoday_button a {
		background: linear-gradient(135deg, #ff1493, #ff66b3, #ff99cc) !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(255, 20, 147, 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;
	}

	.jointoday_button a:hover, 
	.jointoday_button a:focus {
		background: linear-gradient(135deg, #ff99cc, #ff66b3, #ff1493) !important;
		box-shadow: 0 6px 12px rgba(255, 20, 147, 0.3);
	}