Crave: A modern WordPress theme with appetizing aesthetic


Results 1 to 8 of 8

Thread: How to make a <div> into a link button

  1. #1
    Join Date
    Oct 2009
    Location
    Whitley Bay, United Kingdom
    Posts
    48

    Default How to make a <div> into a link button

    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 thanks for any advice offered

  2. #2
    Join Date
    Dec 2009
    Location
    Olympia, Wa
    Posts
    287

    Default

    A <div> is a container, not an item. So, I don't believe it will do what you want.

    however, I do believe that you could style a form button to do what you want. Never tried it, but it kinda makes sense to me.

    Good luck,
    Ron
    Need Hosting: http://southsoundhosting.com
    25% off the month of June with promo code: websitebabble

  3. #3

    Default

    I'm afraid I don't understand what you want to do. Do you want to use a textbox control (input type="text"), a div, a link, a button (input type="button" or button) or don't you really care?

    If you just want to make something that looks like a big button, I'd suggest using a link. You could style it something like this

    HTML Code:
    a.BigLink { display: block; padding: 5em; margin: 2em; background-color: #f00; text-decoration: none; font-size: 3em; font-weight: bold; }
    
    a.BigLink:hover { background-color: #ff0; }
    HTML Code:
    <a class="BigLink" href="somepage.html">Click me!  Click me!</a>
    If you don't want to use links then you can achieve a similar effect by styling a div (or any other control) and attaching a click event to it to change window.location. However this relies on JavaScript being enabled to work. You could also get a similar effect with a form and a (real) submit button by setting the form's action to the next page, though that seems rather OTT to be honest.
    meloncholy - A state of mind brought about by eating too much soft fruit

    I make web things. Sometimes pretty ones.

  4. #4
    Join Date
    Oct 2009
    Location
    Whitley Bay, United Kingdom
    Posts
    48

    Default

    Thanks Meloncholy

    That's 90&#37; of what I want

    All I need now is a way of making this giant button smaller .. say 200px wide x 150 px high

    I will then be able to position this on the page as I want ... well actually I hope to have about 12 of these 'super buttons' in total.

    Thanks again !

  5. #5
    Join Date
    Jul 2007
    Location
    Canada
    Posts
    5,208

    Default

    I'm not sure if this is what you want, but to resize a button, you could do something like:

    HTML Code:
    <input name="submit" type="submit" id="giantbutton" value="Submit" />
    HTML Code:
    #giantbutton{height:150px;width:200px;}

  6. #6
    Join Date
    Oct 2009
    Location
    Whitley Bay, United Kingdom
    Posts
    48

    Default

    That works, as I would like it, but a couple of things worry me

    (1) There isn't much colour. I really wanted to have a light blue colour, then when the mouse moves over or clicks a dark blue is shown. Then the same, maybe with light and dark green etc etc

    (2) Could I position a few of these buttons on screen. Would I need to float them

    I have read a fair bit about html and css but avoided even looking at the forms / input section because I didn't think I would need it

    Maybe I'm trying to achieve something that isn't really possible the way I want it done.

    No doubt I could set up a table, with large cells and do something from there .... but I didn't really want the buttons lined up so plainly

    thanks anyway for your help

  7. #7
    Join Date
    Jul 2007
    Location
    Canada
    Posts
    5,208

    Default

    1. You can change the color of the button by specifying background-color in the CSS for the button. I'm not sure if you can change the color when you hover the mouse over the button, though. I could be wrong.

    2. You can place as many buttons as you want, each with their own style.

  8. #8
    Join Date
    Jun 2009
    Location
    USA
    Posts
    1,004

    Default

    edit
    Last edited by Dee; 02-08-2010 at 03:07 PM.
    Byte the Net - Wordpress and Thesis lessons.
    Do you need
    help setting up Wordpress and/or the Thesis theme?
    Do you need help with writing or editing content?
    I can help. Low Fees. PM me.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •