CODEWITHSUNDEEP
htmlcss
giwook
giwook

Reputation: 580

How to make a button with inside border

I'm trying to make a responsive button that has an "inner border" if that makes sense, see attached picture for what I'm talking about.

button preview

Some of my buttons are a bit wider than others because the button text is longer which is where the responsive part comes in. I created this effect by putting my button into a container div, here's the code:

HTML

<div class="ttw_button_container">
<a class="ttw_button">START THE JOURNEY</a>
</div>

CSS

.ttw_button_container {
    background: #27d9b4;
    width: 330px;
    height: 50px;
    margin: 0 auto;
}
a.ttw_button{  
    background: #27d9b4;
    color: {{ settings.btn_text_color }};
    border: 1px solid white;
    padding: 6px 52px;
    margin: 4px 0 0 0;
    cursor: pointer;
    font-weight: bold;      
    font-size: 19px;
    text-transform: {{ settings.button_font_style }};
    display: inline-block;
    -webkit-transition: all 200ms ease 0s;
    -moz-transition: all 200ms ease 0s;
    -ms-transition: all 200ms ease 0s;
    -o-transition: all 200ms ease 0s;
    transition: all 200ms ease 0s;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Is there a way I can have the container div resize itself to fit the button? Currently I'm manually editing the container's width to fit each button but would ideally like this to be done automatically. Is there a way to do this using just CSS or do we need to bring javascript into the mix?

Thank you!

Upvotes: 3

Views: 24313

Answers (4)

DRD
DRD

Reputation: 5813

And, here's a solution that should work in older browsers that do not support box-shadow. This one uses outline and border declarations: http://jsfiddle.net/Jdzpv/5/.

HTML:

<a class="ttw_button">START THE JOURNEY</a>

CSS:

.ttw_button {
    display: inline-block;
    padding: 6px 25px;
    font-weight: bold;
    font-size: 19px;
    background: #27d9b4;
    outline: 5px solid #27d9b4;
    border: 1px solid #fff;
}

Upvotes: 1

DRD
DRD

Reputation: 5813

Here's a really simple solution using box-shadow that requires less markup and less CSS: http://jsfiddle.net/Jdzpv/3/.

HTML:

<a class="ttw_button">START THE JOURNEY</a>

CSS:

.ttw_button {
    display: inline-block;
    padding: 6px 25px;
    font-weight: bold;
    font-size: 19px;
    background: #27d9b4;
    box-shadow: 0 0 0 5px #27d9b4,
                inset 0 0 0 1px #fff;
}

Upvotes: 7

Chase
Chase

Reputation: 9362

Sure there is, here is a JS fiddle that will accept and scale to any amount of text in there.

http://jsfiddle.net/T9Wk7/

Instead of using a width on your container just use padding:

.ttw_button_container {
    background: #27d9b4;
    padding: 4px 10px;
    margin: 4px 0;
    display: inline-block;
}
a.ttw_button{  
    background: #27d9b4;
    color: {{ settings.btn_text_color }};
    border: 1px solid white;
    padding: 6px 52px;
    font-weight: bold;      
    font-size: 19px;
    display: inline-block;
}

If you want to lose the containing div all together you can do what some of the comments suggest and just use box-shadow:

a.ttw_button{  
    background: #27d9b4;
    color: {{ settings.btn_text_color }};
    border: 1px solid white;
    padding: 6px 52px;
    font-weight: bold;      
    font-size: 19px;
    display: inline-block;
    -moz-box-shadow: 0px 0px 0px 6px #27d9b4
    -webkit-box-shadow: 0px 0px 0px 6px #27d9b4
    box-shadow: 0px 0px 0px 6px #27d9b4
}

Here is a JSfiddle showing that: http://jsfiddle.net/T9Wk7/1/

Upvotes: 2

Nawed Khan
Nawed Khan

Reputation: 4401

Try this:

.ttw_button_container {
    background: #27d9b4;
    width: 330px;
    height: 50px;
    margin: 0 auto;
    padding:6px;
}
a.ttw_button{  
    background: #27d9b4;
    color: {{ settings.btn_text_color }};
    border: 1px solid white;
    padding: 6px;
    line-height:35px;
    cursor: pointer;
    font-weight: bold;      
    font-size: 19px;
    text-transform: {{ settings.button_font_style }};
    display: inline-block;
    -webkit-transition: all 200ms ease 0s;
    -moz-transition: all 200ms ease 0s;
    -ms-transition: all 200ms ease 0s;
    -o-transition: all 200ms ease 0s;
    transition: all 200ms ease 0s;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
    height:100%;
    text-align:center;    
}

Upvotes: -1

Related Questions