troubleshooting Question

Make the entire CSS button surface clickable?

Avatar of sandshakimi
sandshakimiFlag for United States of America asked on
CSS
5 Comments2 Solutions1390 ViewsLast Modified:
Here's my class for the CSS button. The problem is that the mouse has to hover over the type to get the link, I want the visitor to hover over any of the button surface.

<div class="buttonSidebar"><a href="http://www.google.com" target="_new">Google</a></div>


Here's my style

.buttonSidebar
            {
                  color:#FFF;
                  background:#0b6282;
                  /*float: left;*/
                  padding:5px;
                  font-family:Arial, Helvetica, sans-serif;
                  font-weight:bold;
                  border-radius:4px;
                  border-top: 1px solid #CCC;
                     border-right: 1px solid #706d6d;
                     border-bottom: 1px solid #706d6d;
                  width: 120px;
                  height:20px;
                  font-size: 1em;
                  text-align: center;
                     margin-top: -5px;
            }
            
            .buttonSidebar:hover
            {
                  background:#1b9cce;
                  color:#000;
            }
            
            .buttonSidebar a
            {
                  text-decoration:none;
                  color:#fff;
            }
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 2 Answers and 5 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros