CODEWITHSUNDEEP
css
blahblahblahblah
blahblahblahblah

Reputation: 115

How Do I Make a CSS Button Clickable

I've made my own buttons using 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;
}

And there's some text in it.

Right now, only the text is clickable.

I want to make my whole button clickable, i.e. when the user hovers over any part of the button, not just the text. Anyone know how to do that? I'm guessing I have to work with #bluebutton1:hover, but not sure what code to put in there.

Upvotes: 3

Views: 46486

Answers (3)

Mahdi Moradi
Mahdi Moradi

Reputation: 1

Put this in your code

cursor: pointer;

Upvotes: 0

DreamWave
DreamWave

Reputation: 1940

to those rules add this:

display:block;

Make the button a SPAN (to be W3C correct) and surround it with the a tag like this:

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

Then the entire button will be clickable - not just the text inside.

Also, since this is a button and buttons are a lot (might be). It would be a good idea to make your CSS rule a class:

  .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;
  }

and use it like this:

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

This way you can make more buttons of this kind on the page.

The :hover pseudo element is used to change how the button looks when you hover it with the mouse. You can use:

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

Which would change the background color of the button to red when hovering it with the mouse. Any rules you enter using the :hover pseudo element will be applied to the button when hovering it and will override the original rules in the previous declaration.

UPDATE:

Change the code in your page from this:

<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>

To this:

<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>

In order to make an entire element clickable you surround it with the A tag. And since due to standarts DIV elements should never be inside an A tag, you have to change the div to span.

Upvotes: 5

Abdul Malik
Abdul Malik

Reputation: 2642

#bluebutton1 a{display:block;}

Upvotes: 1

Related Questions