Как мне сделать CSS кнопки кликабельны

Question

Я сделал свои собственные кнопки с помощью CSS:

#bluebutton1 { 
    position: absolute; 
    top: 327px; 
    left: 650px; 
    height: 70px; 
    width: 120px; 
    border:2px solid #6495ED; 
    background-color: #BCD2EE; 
    border-radius: 40px; 
    padding-top: 7px; 
} 

И есть какой-нибудь текст в нем.

Прямо сейчас, только текст можно щелкнуть.

Я хочу, чтобы вся моя кнопка была нажата, то есть когда пользователь наводил курсор на любую часть кнопки, а не только на текст. Кто-нибудь знает, как это сделать? Я предполагаю, что мне нужно работать с # bluebutton1: hover, но не уверен, какой код поставить там.

Answer 1

#bluebutton1 a{display:block;} 

Answer 2

этих правил добавить следующее:

display:block; 

Сделать кнопку пролетом (чтобы быть W3C правильно) и окружить его с тэгом как это:

<a href="http://your-website-here.com"><span id="bluebutton1">Text in the button</span></a> 

Тогда целая кнопка будет кликабельна, а не только текст внутри.

Кроме того, поскольку это кнопка и кнопки много (может быть). Было бы неплохо, чтобы сделать ваш CSS править класс:

.bluebutton1 { 
    position: absolute; 
    top: 327px; 
    left: 650px; 
    height: 70px; 
    width: 120px; 
    border:2px solid #6495ED; 
    background-color: #BCD2EE; 
    border-radius: 40px; 
    padding-top: 7px; 
    display:block; 
    } 

и использовать его как это:

<a href="http://your-website-here.com"><span class="bluebutton1">Text in the button</span></a> 

Таким образом, вы можете сделать больше кнопок такого рода на этой странице.

Элемент: hover pieudo используется для изменения способа отображения кнопки при наведении на нее мыши. Вы можете использовать:

.bluebutton:hover { 
    background-color:red; 
} 

Что изменило бы цвет фона кнопки на красный при наведении на нее мыши. Любые правила, которые вы вводите с использованием псевдоэлемента: hover, будут применены к кнопке при ее зависании и переопределите исходные правила в предыдущем объявлении.

UPDATE:

Изменить код на вашей странице с этого:

<div id="bluebutton1"> 
     <p><a href="jerry.pancakeapps.com/Resume.pdf">Check out my <span style="color:red; font-family:Verdana; font-size:14px" id="link1"><strong>Resume</strong></span>!</a></p><br> 
     </div> 

Для этого:

<a href="jerry.pancakeapps.com/Resume.pdf" style="display: block;"> 
    <span id="bluebutton1"> 
     <p> 
      Check out my 
       <span style="color:red; font-family:Verdana; font-size:14px" id="link1"> 
        <strong>Resume</strong> 
       </span>! 
     </p> 
     <br> 
    </span> 
</a> 

Для того, чтобы сделать весь элемент в ссылку вы окружать его с A тег. И поскольку из-за стандартов элементы DIV никогда не должны находиться внутри тега A, вам нужно изменить div на span.