<div class="wrapper">
<input type="text">
<div class="button">
<a href="#">Btn</a>
</div>
</div>
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
input {
padding: 10px;
}
.button {
width: 100%;
max-width: 100px;
}
.button a {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: black;
text-transform: uppercase;
text-decoration: none;
border-radius: 5px;
border: 1px solid black;
transition: background .5s ease, color .5s ease;
}
.button a:hover {
color: white;
background: #000;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.