HTML5 - buttons not the same width - html

Question

I'm trying to get my buttons to have the same width but for some reason, it's not working. What needs to be done in order to make sure that all buttons comply with these desired results?:
All buttons must have the same width
All buttons must NOT use the whole width of the page
have the same width
/*File download button*/
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<p>Hello World</p>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

Answer 1

All buttons must have the same width
All buttons must NOT use the whole width of the page
The main trick is to add a wrapper in the markup, a new CSS rule and set the buttonFileDownload to display: block.
.buttonFileDownload_wrapper { /* added rule */
display: inline-block;
}
.buttonFileDownload {
display: block; /* changed to block */
...
}
If you also want them centered, set the buttonFileDownload_wrapper's parent to text-align: center (in this case the body)
body {
text-align: center; /* added property */
}
Stack snippet
/*File download button*/
body {
text-align: center; /* added property */
}
.buttonFileDownload_wrapper { /* added rule */
display: inline-block;
}
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: block; /* changed to block */
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div class="buttonFileDownload_wrapper">
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>
</div>

Answer 2

"width" is based on content if you don't set the width of the element. So either make all the content the same or set a width on the element.

Answer 3

You need to set the width of the element, otherwise its based on it's content length.
For instance:
/*File download button*/
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
min-width:250px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

Answer 4

You should add a width to your container and width 100% on your buttons:
/*File download button*/
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
width: 400px;
}
.buttonFileDownload {
width: 100%;
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

Answer 5

Why don't you only use 1 container with a specific with, lets say 200px and make the buttons width 100%?
.buttonFileDownload_container {
width: 200px;
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
width: 100%;
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

Answer 6

/*File download button*/
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
width:260px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>

Answer 7

Make a container . Set its width to the width you want for each button to have. Make width of all div inside it to 100%
Make width of all a tag inside that div to 100%
Simple
/*File download button*/
#container {
width: 200px;
}
#container > div {
width:100%;
}
#container > div > a {
width:100%;
}
.buttonFileDownload_container {
text-align: center;
margin-bottom: 20px;
}
.buttonFileDownload {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
font-size: 1.5em;
line-height: 1.2;
text-align: center;
text-indent: 15px;
}
.buttonFileDownload:before,
.buttonFileDownload:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* Download box shape */
.buttonFileDownload:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
/* Download arrow shape */
.buttonFileDownload:after {
width: 0;
height: 0;
margin-left: 6px;
margin-top: -140px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonFileDownload:hover:before {
border-color: black;
}
.buttonFileDownload:hover:after {
border-top-color: black;
animation-play-state: running;
}
/* keyframes for the download icon anim */
#keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -14px;
opacity: 1;
}
0.001% {
margin-top: -30px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<div id="container">
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Numbers</u><br/>
Numbers description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Colours</u><br/>
Colours description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/>
Onomatopoeia description</a>
</div>
<div class="buttonFileDownload_container">
<a href="#" class="buttonFileDownload"><u>Alphabet</u><br/>
Alphabet description</a>
</div>
<div>