CSS3中的按钮不可单击

Question

I want to make some fancy social buttons with Font Awesome , CSS3 and lists in HTML. It should look like this. But now it is not possible to click on the anchor (a-tag).

How can I accomplish this?

 ul { list-style: outside none none; } ul li { display: block; float: left; background-color: #099; margin-right: 10px; padding: 10px 0px; text-align: center; width: 40px; opacity: 0.2; transition: all 0.2s ease-in-out 0s; } li::before { color: #FFF; font-size: 35px; } ul li a { color: transparent; font: 0px/0 a; white-space: nowrap; } ul li:hover { opacity: 1; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> <ul id="menu-social" class="menu"> <li id="menu-item-googleplus" class="fa fa-google-plus menu-item menu-item-googleplus"> <a href="#">Google+</a> </li> <li id="menu-item-facebook" class="fa fa-facebook menu-item menu-item-facebook"> <a href="#">Facebook</a> </li> </ul> 

Answer 1

Add position relative to the li elements and then stretch the anchor.

ul li {
    display: block;
    float: left;
    background-color: #099;
    margin-right: 10px;
    padding: 10px 0px;
    text-align: center;
    width: 40px;
    opacity: 0.2;
    transition: all 0.2s ease-in-out 0s;

    /* Add position */
    position:relative;
    }

ul li a {
    color: transparent;
    font: 0px/0 a;
    white-space: nowrap;

   /* Stretch a element */
   position: absolute;
   left:0;
   top:0;
   width:100%;
   height: 100%;
}