How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?


Tags: javascript,jquery,html,css,css3

Problem :

How do you create a perfectly scalable button in HTML/CSS3/jQuery+Plugins using images to provide borders and corners?

I have thought of a method that is absolutely messy, and I believe there are much better ways to solve the problem.

My method involves something like this:

<div class="button-container">  

    // The corners are all the same image, just rotated for the specific corner
    // (using CSS)

    <div class="top-right"></div>
    <div class="bottom-right"></div>
    <div class="top-left"></div>
    <div class="bottom-left"></div>


    // The (height, width) of the top/bottom edge are (5px,1px), so they can
    // repeat-x (or be stretched infinitely with no loss of quality), likewise
    // for the left/right edges, they can repeat-y (or again be stretched).

    <div class="top-edge"></div>
    <div class="bottom-edge"></div>
    <div class="left-edge"></div>
    <div class="right-edge"></div>


    // This simply fills the center of the button, with padding on every
    // edge to allow for transparency on the corners.

    <div class="center-fill"></div>
</div>

People who can solve my problem see where that is going.

More info/clarification provided on request.

Edit: Not sure why you'd need a fiddle, my method is pretty self explanatory, and if you can't figure it out Smart way to add corner image to DIV border on all four corners

That doesn't solve my problem though, my method is exactly what I do not what to use. I am trying to make an button that is scalable, similarly to how pure CSS3 buttons are scalable. If I want the top edge border of my image to be a 1-pixel wide 5-pixel high image that is stretched horizontally or repeated on the x-axis, I must use an image. I want an elegant solution to constructing a button out of images and CSS 'tricks'.



Solution :

Try using border images, an great example is given here:

http://www.css3.info/preview/border-image/

border-image: url(border.png) 27 27 27 27 stretch stretch;

http://www.css3.info/images/border-image1.gif

You can use different images for the corners like this:

border-image:
    border-top-image
    border-right-image
    border-bottom-image
    border-left-image

border-corner-image:
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image

    CSS Howto..

    How to set the maximum height of CSS tables?

    HTML/CSS: How to resize checkboxes (without overlapping)

    How to use jQuery and CSS to write vertical drawer

    How to reset a slideshow after the last picture is shown

    How do horizontally align text next to an image with CSS

    How to call css into div class inner div class? [closed]

    How can I get IE8 to accept a css :before tag?

    CSS - How to pad an elements width by 50% of itself?

    How to override a CSS class within a content div

    How to make a smoother animation with jQuery UI slide effect

    How to style Anchor in GWT?

    how do i place a text upperright side of the image?

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    Overflow-x and overflow-y properties, how should they work? [duplicate]

    How to prevent PHP pushed HTML tables exceeding the length of the page

    How to allow content area to be expandable to right but not pop under sidebar?

    How to make Gravity Forms Responsive (left/right )?

    Using CSS, how can I control the line-height for master headline?

    How to edit CSS file in Objective-C

    How to “reset” a DOM subtree's CSS style?

    How can I add CSS and JS in Symfony2?

    How to show a background color over the full width when zooming in?

    How to align an image of any size from the centre, rather than the top/bottom/sides, using css

    CSS only - how to have a scrolling ul with all li on one line

    how to make the parent width equals the width of all element inside it?

    How to put a css tag in an element if another has this element [closed]

    “How to Ask” box when typing a question in SO. How do get that scrolling effect? Pure CSS or JS?

    CSS: show only the last x items in a list

    How to scrape a live java script webpage in R?

    How to specify image size in webview css using dip?