Using div boxes as big link button, via CSS : How ?

[wbmkk]

I want to use text boxes, made using <div> tags into giant buttons, linking to other parts of my site

I would like a background color filling the entire div box, with 2 words att he most of text inside, aligned vertically and horizonally.

Then, when the mose is hovered over, I want the whole div to chage background color

Basically, I want a giant button.

Later on I may want to change the color scheme, so don't want to bother of making graphics buttons. Updating a slight CSS change is, I am sure a much easier option ...

although of course, at this stage I have never actually uploaded anything.

I am using a simple text deditor (notepad ++) not a fancy WYSIWYG editor, such as Dreamweaver.

Many many thanks for any advice offered

 

[northpark]

<div id="big_button" onclick="location.href='http://www.yourlinkehere.com';" style="cursorointer;">

<p>your link text here</p>


</div>

then style it using css...


#big_button { background:#ccc; }

#big_button p { font-size:2em; color:#000; } etc.

 

[northpark]

haha, the smily face thing should show as

: p

with no space. Don't know how to stop it doing that

 

[PixelPusher]

Not sure there is a solution to the favicon issue other than a space P). Funny though.

wbmkk,

North parks solution will work fine, but bare in mind if you are using divs as buttons then you will need to use the onclick attribute and that require javascript. If someone has that disabled in their browser, you buttons will not work.

Why not just use the anchor tag? It can be used as a block-level element just like a div.

<a href="http://www.example.com">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam faucibus, tortor sed placerat gravida, eros felis sollicitudin magna, sed congue lorem nisi at nulla. Maecenas venenatis eros sit amet diam molestie mattis. Quisque rutrum dictum velit sit amet ullamcorper. Integer faucibus dictum nisi eu facilisis. </a>

a {
display:block;
width:300px;
height:auto;
padding:5px;
margin:0;
color:#555;
text-decoration:none;
background-color:#ccc;
}
a:hover {
background-color:#ddd;
}

 

[wbmkk]

Northpark

I was just trying your way but wasn't sure if / how I could change the colours, ie when the mouse moves over. I had started to write a reply, when I noticed PixelPusher had replied too.

PixelPusher

Brilliant ! that's what I wanted.

I can just change the font etc to get what I want in my boxes

I've been reading a bit about html and css, but kept clear of Javascript, so I wouldn't get confused (as if I'm not confused already)

I assume I'll be able to manage to get several of my "super-buttons" on my page.

Thanks again to both of you !!

 

[PixelPusher]

no problem you welcome.

You should not have any trouble getting multiple "super buttons" on your page. Just adjust the width as needed. Btw, if you are going to have multiple SBs together you can align them horizontally with an unordered list.

 

[mezangath]

If you don't want to use the a attribute in the CSS or throw in java into the mixture, simply:

HTML:

<div class="bigassbutton" href="whateverpageyouwantto" > CLICK ME </div>

CSS:

.bigassbutton {
height:300px;
width:300px;
background-color:CCC;
color:#000;

.bigassbutton:hover {
>>>Insert New CSS attributes<<<
}
.bigassbutton:action {
>>>Insert New CSS attributes<<<
}

The problem with adding the box attributes to the a value is that this will affect ALL your links and I think that I don't like using java for such easily achieved matters.

 

[PixelPusher]

mezangath,

your method may work, but it is not semantically correct. Href is not a valid attribute of the division tag. Plus, why use a div as an anchor when we have an anchor tag? That's the same as styling a paragraph tag as a heading.