Responsive tip calculator with HTML, CSS and Vanilla JS

Hello friend, you can fix your hover issue by using proper semantics for a list of buttons like so

<fieldset class="tip-input">
     <legend>Select Tip %</legend>
         <div class="button-container">
            <input id="tip5" type="button" value="5%" />
            <input id="tip10" type="button" value="10%" />
            <input id="tip15" type="button" value="15%" />
            <input id="tip25" type="button" value="25%" />
            <input id="tip50" type="button" value="50%" />
            <input id="custom-input" type="tel" placeholder="Custom" maxlength="5" />
        </div>
</fieldset>

to remove the border from fieldset you can adjust your css file

label,fieldset {
	display: flex;
	flex-direction: column;
	color: var(--dark-grayish-cyan);
}