unable to increase size of horizontal list item using css

I'm trying to make these hover buttons side by side like in a horizontal menu but the buttons won't seem to get bigger even if I fix their height and width
.button li{
display: inline;
background-repeat: no-repeat;
}
 
.button li a{
background-color: #CCCCCC;
/*background-image: url(normal image path);*/
background-repeat: no-repeat;
width: 100px;
height: 50px;
}
 
.button li a:hover{
background: none;
}
 
 
 
 
<div align="center">
<ul class="button">
<li><a href="#test">My link</a></li>
<li><a href="#test">My link</a></li>
</ul>
</div>

Open in new window

LVL 2
MeridianManagementAsked:
Who is Participating?
 
santoshrajanConnect With a Mentor Commented:
Set the width and height for 'li' css and remove it fro where it is now.
.button li{
display: inline;
background-repeat: no-repeat;
width: 100px;
height: 50px;
}
 

Open in new window

0
 
jericotolentinoCommented:
I'm not really sure what you're trying to do, but you can try:

padding: 10px;

if it works for you.
0
 
MeridianManagementAuthor Commented:
I want to make horizontal hover buttons. Padding 10 doesn't work because it makes the LI bigger but the gray part where the links are still looks small.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.