I have been working on designing a unique button for my personal diet app project that involves a sliding text effect when the mouse hovers over it. I'm almost there, but I've encountered a major issue that seems impossible to solve. I want the sliding text to appear within a black box with yellow borders rather than just floating around. However, due to the 0 width of the text needed to trigger the animation inside the button, the black box ends up being just a vertical line in the center of the button. Additionally, the black box remains visible at all times instead of being transparent like the text before hover. I've tried various methods, such as adjusting the width, nesting the text in containers, and styling them differently, but nothing seems to work. Any suggestions or help would be greatly appreciated!
#create-meal-button {
background-color: #ffc107;
border-radius: 100%;
transition: 0.3s;
display:inline-block;
}
#create-meal-button:hover {
transform: scale(1.2);
background-color: black;
border: solid 0.1vw #ffc107;
}
#create-meal-button > svg { width: 50px; }
#create-meal-button > svg:hover { fill:#ffc107; }
#create-meal {
text-align: center;
}
#create-meal > div {
display: inline-block;
}
span {
display: inline-block; /* inline-block so width can be set */
width: 0;
white-space: nowrap; /* keep text in one line */
direction: ltr; /* overflow direction */
color: rgba(255,255,255,0); /* text transparency before hover */
transition: .5s;
transform: translateX(-20px); /* distance the text will move on hover */
pointer-events: none;
}
#create-meal > div:hover span {
color: #ffc107;
border: solid 0.1vw #ffc107;
transform: translateX(0);
}<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2f2222393e393f2c3d0d78637e637f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e69388958894">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>
<div id="create-meal">
<div>
<button id="create-meal-button" class="btn">
<svg xmlns="http://www.w3.org/2000/svg" height="50" viewBox="0 -960 960 960" width="50">
<path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
</svg>
</button>
<span id="create-meal-tooltip" class="bg-black p-1 rounded">Create meal</span>
</div>
</div>