Clever Geek Handbook

Multiple buttons in a CSS + button with an image not displaying correctly.

You are currently trying to create a web page for my little companion. Let's say it has been a while since I coded and I have never used CSS until NOW! :)

Here are my problems:

Problem # 1 I have multiple buttons (7) in a row and my last button has an image inside instead of text.
A button that has an image inside it is not the same as other buttons! Button now showing properly

I've img

scaled mine down from 25px to 15px height

, but the button still sticks to the top border.
I added height:100px

to .myButton to check if it was another image ... But as you can see in this picture ... this is not a problem. (I have updated my new code)

Still not workingProblem # 2 (SOLVED THANKS !!!) I would like to make all buttons equal! Right now they are all different lengths. How can i do this?

Here is my current code! Thanks to

<style>
body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}
#button {
	margin:0 auto;
    background-color:#eeeeee;
    width:768px;
    padding:0px;
	display: flex;	      
}
.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
	box-shadow:inset 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0e1b7), color-stop(1, #f7be14));
	background:-moz-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
	background:-webkit-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
	background:-o-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
	background:-ms-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
	background:linear-gradient(to bottom, #f0e1b7 5%, #f7be14 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0e1b7', endColorstr='#f7be14',GradientType=0);
	background-color:#f0e1b7;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:2px solid #969187;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	padding:5px 16px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
	width:70px;
	height:100px;

}

.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f7be14), color-stop(1, #f0e1b7));
	background:-moz-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
	background:-webkit-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
	background:-o-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
	background:-ms-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
	background:linear-gradient(to bottom, #f7be14 5%, #f0e1b7 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7be14', endColorstr='#f0e1b7',GradientType=0);
	background-color:#f7be14;
}
.myButton:active {
	position:relative;
	top:1px;
}
</style>
      

        
        
        
      

    
<div id="button" align="center">
	<a href="#" class="myButton">Entreprise</a>
    <a href="#" class="myButton">Produits</a>
	<a href="#" class="myButton">Services</a>
	<a href="#" class="myButton">Photos</a>
	<a href="#" class="myButton">Références</a>
	<a href="#" class="myButton">Calculs Ing.</a>
	<a href="#" class="myButton"><img src="Image/Boutons/usine.png"/></a>
</div>
Run codeHide result


+3


source to share


4 answers


Using a background image

The background image is the best choice semantically here, as the image is mainly decoration.

The button containing the image gets the class .imageLink

and associated text corresponding to the content of the page associated with. The text will be removed in the CSS but will still be indexed by search engines.

The image replacement button looks like this:

<a href="#" class="myButton imageLink">Image Link</a>

and CSS. The text is removed with text-indent: -9999px;

and the image is placed as the background (before the background of the gradient is specified). The height matches the height of the background image:



.imageLink {
  background:url(http://www.placehold.it/50) center no-repeat, linear-gradient(to bottom, #f7be14 5%, #f0e1b7 100%);  
  text-indent: -9999px;
  height: 50px;
}

Finally, the links are saved as display: inline-block

, but added vertical-align: bottom

to align them vertically to the bottom of the image button.

Complete example

body {
  margin: 0;
  padding: 0;
  text-align: center;
  /* !!! */
}
#button {
  margin: 0 auto;
  background-color: #eeeeee;
  width: 768px;
  padding: 0px;
}
.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #fff6af;
  -webkit-box-shadow: inset 0px 1px 0px 0px #fff6af;
  box-shadow: inset 0px 1px 0px 0px #fff6af;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0e1b7), color-stop(1, #f7be14));
  background: -moz-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
  background: -webkit-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
  background: -o-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
  background: -ms-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
  background: linear-gradient(to bottom, #f0e1b7 5%, #f7be14 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0e1b7', endColorstr='#f7be14', GradientType=0);
  background-color: #f0e1b7;
  border-radius: 6px;
  border: 2px solid #969187;
  display: inline-block;
  cursor: pointer;
  color: #333333;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 16px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
  width: 70px;
  vertical-align: bottom;
}
.myButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f7be14), color-stop(1, #f0e1b7));
  background: -moz-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
  background: -webkit-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
  background: -o-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
  background: -ms-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
  background: linear-gradient(to bottom, #f7be14 5%, #f0e1b7 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7be14', endColorstr='#f0e1b7', GradientType=0);
  background-color: #f7be14;
}
.myButton:active {
  position: relative;
  top: 1px;
}
.imageLink {
  background: url(http://www.placehold.it/50) center no-repeat, linear-gradient(to bottom, #f7be14 5%, #f0e1b7 100%);
  text-indent: -9999px;
  height: 50px;
}

.imageLink:hover {
  background: url(http://www.placehold.it/50) center no-repeat, linear-gradient(to top, #f7be14 5%, #f0e1b7 100%);
}
      

        
        
        
      

    
<div id="button">
  <a href="#" class="myButton">Entreprise</a>
  <a href="#" class="myButton">Produits</a>
  <a href="#" class="myButton">Services</a>
  <a href="#" class="myButton">Photos</a>
  <a href="#" class="myButton">Références</a>
  <a href="#" class="myButton">Calculs Ing.</a>
  <a href="#" class="myButton imageLink">Image Link</a>
</div>
Run codeHide result


+1


source


To keep all buttons the same size, you can use flexible margins:

#button {
    display: flex;            /* Same height */
}
.myButton {
    width: 100%;              /* Same width */
}

And to center the text vertically inside buttons, you can also use flexible margins:



.myButton {
    display: flex;
    align-items: center;      /* Center vertically */
    justify-content: center;  /* Center horizontally */
}

      

        
        
        
      

    

#button {
  margin: 0 auto;
  background-color: #eeeeee;
  width: 768px;
  padding: 0px;
}
.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #fff6af;
  -webkit-box-shadow: inset 0px 1px 0px 0px #fff6af;
  box-shadow: inset 0px 1px 0px 0px #fff6af;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0e1b7), color-stop(1, #f7be14));
  background: -moz-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
  background: -webkit-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
  background: -o-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
  background: -ms-linear-gradient(top, #f0e1b7 5%, #f7be14 100%);
  background: linear-gradient(to bottom, #f0e1b7 5%, #f7be14 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0e1b7', endColorstr='#f7be14', GradientType=0);
  background-color: #f0e1b7;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 2px solid #969187;
  display: inline-block;
  cursor: pointer;
  color: #333333;
  font-family: arial;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 16px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffee66;
}
.myButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f7be14), color-stop(1, #f0e1b7));
  background: -moz-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
  background: -webkit-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
  background: -o-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
  background: -ms-linear-gradient(top, #f7be14 5%, #f0e1b7 100%);
  background: linear-gradient(to bottom, #f7be14 5%, #f0e1b7 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7be14', endColorstr='#f0e1b7', GradientType=0);
  background-color: #f7be14;
}
.myButton:active {
  position: relative;
  top: 1px;
}

#button {
  display: flex;
}
.myButton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
      

        
        
        
      

    
<div id="button" align="center">
  <a href="#" class="myButton">Entreprise</a>
  <a href="#" class="myButton">Produits</a>
  <a href="#" class="myButton">Services</a>
  <a href="#" class="myButton">Photos</a>
  <a href="#" class="myButton">Références</a>
  <a href="#" class="myButton">Calculs Ing.</a>
  <a href="#" class="myButton">
    <img src="Image/Boutons/usine.png" />
  </a>
</div>
Run codeHide result


0


source


The image inside your button is too big.
You should make the image smaller and just in case,
provide a height for your buttons.

.myButton {
height: 40px; /* Whatever height you want */
}

.myButton img {
height: 25px;
width: 25px;
}

EDIT: You can also make the image your own button background
to put it in the button.

.myButton #imgbutton {
background-image: url('Image/Boutons/usine.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

HTML would like:

<a href="#" class="myButton">
<img id="imgbutton"  src="Image/Boutons/usine.png">
</a>

Alternatively, you can make all the buttons slightly taller, for example in the second image,
and center the content.

.myButton a {
display: table-cell;
vertical-align: middle;
}

As for the second problem, it is as simple as the previous one.
You just need to provide a total width for your buttons.

.myButton {
width: 60px; /* Whatever width you want */
}

The final code will look like this:

.myButton {
height: 40px; /* Whatever height you want */
}

.myButton img {
height: 25px;
width: 25px;
}
0


source


The reason the image button is not aligned is because the content inside it is larger than the text, there are two solutions for this:

  • Decrease the height of the image inside the button
  • Increase the height of the text buttons by manually calculating the height of the image button and matching it (which can be achieved with height:100px

    c .mybuttons

    .

For the second problem (same width), install width: 90px;

.

You .myButton

can achieve the same width between buttons (change 90 to whatever you think is best).

-1


source






More articles:


All Articles