I'm attempting to design HTML buttons and labels with text that initially have zero width. Once inserted, they should smoothly transition to a visible state. I've tried adjusting the initial width and min-width style properties without success.
Below is the desired functionality:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.zerowidth{width: 0px;min-width: 0px;}
.nonzerowidth{font-size: 30px;}
button{font-size: 30px;}
label{font-size: 30px;}
span{font-size: 0px;}
</style>
</head>
<body>
<span>
<button>This should be visible</button>
<button class='zerowidth'>I want this to be invisible</button>
<label class='zerowidth'>same here</label>
<button>c</button>
</span>
</body>
</html>
The goal is for the above code to display identically to a version without the .zerowidth elements, so the .zerowidth elements can later have their widths animated smoothly to nonzero values.
If there's a simpler method to insert an item into the DOM that allows for smooth repositioning of surrounding elements (similar to the example shown), please share. However, I prefer to avoid absolute positioning if possible.
Thank you.