css button : button horizontal align and size stretch with text size

Question

I'm trying to make a button with a left , middle (repeating) and right background:

<div class="horizontal">
    <div class="myButton">
        <div class="left" ></div>
        <div class="middle" >
            some text
        </div>
        <div class="right" ></div>
    </div>
</div>

My css is the following:

.horizontal {
      width: 100%;  
}

.myButton {
    width: 120px;
     height: 30px;
}

.left {
    background-image: url("https://i.sstatic.net/r5GpP.png");
    /*border: 1px solid red;*/
    float: left;
    height: 30px;
    width: 4px;
}

.middle {
    background-image: url("https://i.sstatic.net/yXPkE.png");
   /* border: 1px solid yellow;*/
    float: left;
    height: 30px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    width: 100px;
}

.right {
    background-image: url("https://i.sstatic.net/OAPLe.png");
    /*border: 1px solid green;*/
    float: left;
    height: 30px;
    width: 4px;
}

Now what I need is:

• myButton to be aligned in the middle of the horizontal block (the page).

• And the middle to be stretched so any text would fit (without manually setting the width to 120px in my example).

I have no clue how to do this.

Here's a fiddle : http://jsfiddle.net/kCBpw/3/ ,

thank you very much.

Answer 1

You should minify your button structure using only 2 containers instead of 3. Merging one side with 'middle' this will reduce images numbers (if you use mouseOver) .. and the html markups.

HTML

<div class="myButton">
    <div class="myButton-inner" >
        some text
    </div>
</div>

CSS

.myButton {
    background: url("../images/btn-left-small-texture.png") no-repeat scroll left top transparent;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-family: helvetica,sans-serif;
    font-size: 16px !important;
    font-weight: 700 !important;
    height: 28px;
    line-height: 28px;
    padding-left: 10px;
    text-shadow: 1px 1px 2px #9F730C;
}

.myButton-inner {
    background: url("../images/right-big-texture-merging-middle.png") no-repeat scroll right top transparent;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding-left: 5px;
    padding-right: 40px;
}

This way you're able to manage 'over' effect with just 1 .css declaration and a minor ajustment of your image txture.

.myButton:hover,.myButton-inner:hover {
    background-position: 0 fit-for-your-image-px;
}    

Nota: this is a copy-paste of one of my development, so if you need details, i will comment it for you. But, CSS speaks for itself.

Answer 2

Here's your updated fiddle: http://jsfiddle.net/stevenschobert/fNdrT/

To fix the text-wrapping & vertical centering in your .middle class, add a line-height:30px and a min-width:50px;

.middle {
    min-width: 50px;
    line-height:30px;
    /* rest of styles ... */
}

For the horizontal alignment, you can add a text-align:center; to your .horizontal class and then a margin:auto; to your .myButton.

.horizontal {
    width: 100%;
    text-align:center;
}

.myButton {
    margin:auto auto;
    /* cont... */
}

Answer 3

I just had to do this, here's a pure CSS button with this style, just have to adjust the colors to look more like your example:

HTML

<a class="button" href="">Lorem ipsum dolor.</a>

CSS

.button {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    position: relative;
    border: 1px solid chocolate;
    color: black;
    background: linear-gradient(to right, chocolate 0, beige 1px, beige 3px, chocolate 3px) repeat;
    background-size: 4px;
    box-shadow: inset 0 0 3px white;
}

.button:before,
.button:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    margin-top: -5px;
}

.button:before {
    left: -5px;
    border-right: 1px solid chocolate;
}

.button:after {
    right: -5px;
    border-left: 1px solid chocolate;
}

Answer 4

your problem is you need to take off all the width off of your mid and mybutton. Then once you have done that put a float:left on mybutton and your solution. !!!Changed my fiddle!!! http://jsfiddle.net/cornelas/kCBpw/6/

.horizontal {

} .myButton div { display: inline; padding-bottom: 11px; } .myButton {

 height: 30px;

}

.left { background-image: url("https://i.sstatic.net/r5GpP.png"); /border: 1px solid red;/ height: 30px; width: 4px; padding-right: 4px; }

.middle { background-image: url("https://i.sstatic.net/yXPkE.png"); /* border: 1px solid yellow;*/ height: 30px; padding-left: 5px; padding-right: 5px; text-align: center; }

.right { background-image: url("https://i.sstatic.net/OAPLe.png"); /border: 1px solid green;/ height: 30px; width: 4px; padding-right: 4px; }

Answer 5

Remove the width on your .middle and .button class and set their display to inline-block. It will take the width of the text!