Need help with creating a transition effect within a bordered div that reveals hidden content when a button is clicked? I'm looking to have the <a> tag displayed after clicking the button, with both the button and text sliding to the left. Here's what has been accomplished so far:
.testparent {
margin-left: 35%;
}
.test {
border: 0.5px solid silver;
width: 100px;
z-index: 999;
}
button {
padding: 10px;
color: white;
background-color: blue;
border: 0.5px solid silver;
height: 40px;
outline: none;
transition: all 0.2s;
width: 65px;
display: block;
}
button:focus {
background-color: red;
transform: translateX(-75px);
}<html>
<head></head>
<body>
<div class="testparent">
<div class="test">
<button id="button1">Test</button><br>
<span>Lorem ipsum dolor sit amet, cu omnium equidem quo, id primis nostro atomorum his. Ad mel facer dicam. Ad vix stet perpetua, ex omnes referrentur vel. Sed te omnes doming, mea ea prima iracundia. Eruditi recteque an cum.</span>
<a href="https://www.google.com">Google</a>
</div>
</div>
</body>
</htmlTried using z-index without success.