<button> with no text inside appears higher [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to make a spinner within a button to indicate that an action is loading. the problem is that if a button has no text in it, it will appear higher than the rest of the buttons, and I want them to be aligned.
Here's the HTML:
<div>
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>
and the CSS:
.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
and this is the result
enter image description here
I want all 3 buttons to be aligned, is it possible? thanks

Answer 1

You can use flex on the first div like that:
.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
.first{ display:flex; }
<div class="first">
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>

Answer 2

CSS Flexbox can help you out there. My approach with commented code:
div {
width: 200px; /*just for the example*/
display: flex;
flex-flow: row nowrap;
align-items: center;/*vertical alignment*/
justify-content: space-between;/* spacing / horizontal alignment*/
}
.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
<div>
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>

Answer 3

Here an example
let btn = document.querySelector("button");
btn.addEventListener("click", () => {
let loader = document.querySelector(".loader");
btn.classList.add("disabled");
loader.style.display = "block";
})
.buttonclass {
min-height: 40px;
min-width: 40px;
display: flex;
align-items: center;
transition: 300ms;
border: 1px solid lightgrey;
outline: none;
cursor: pointer;
}
.loader {
margin-left: 10px;
display: none;
border: 2px solid #f3f3f3; /* Light grey */
border-top: 2px solid #3498db; /* Blue */
border-radius: 50%;
width: 15px;
height: 15px;
animation: spin 0.45s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
.disabled {
background: lightgrey;
color: white;
border: 1px solid lightgrey;
pointer-events: none;
outline: none;
color: grey;
}
<button class="buttonclass">Click me<div class="loader"></div></button>