How can I extend the width of a button to fill the div's width

Question

I found this awesome app that allows me to pick my button exactly the way I want it and copy it to my code with CSS: http://livetools.uiparade.com/button-builder.html#

But I would like my button to extend from one end of the div to the other like in this w3 tutorial using "online scripts": http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_block&stacked=h

Is it possible for me to create a button with CSS in that button builder and make it appear like in the w3 tutorial (filling the width of the div)?

Also, how do I reduce the (vertical) space between buttons?

Welcome to Stack Overflow! Please review [**How to ask**](http://stackoverflow.com/help/how-to-ask) questions on Stack Overflow and what types of questions [**can be asked**](http://stackoverflow.com/help/on-topic) and what types [**should be avoided.**](http://stackoverflow.com/help/dont-ask) — Paulie_D, Jul 03 '15 at 13:39
Duplicate: http://stackoverflow.com/questions/12061139/making-button-go-full-width — Rvervuurt, Jul 03 '15 at 13:41
Adding width to wrapping `div` and adding width to button as `100%` will do the job. **[Fiddle](http://jsfiddle.net/Lhfqnxvw/)**. PS- Please consider reading links on @Paulie_D's comment. — Vibhor Dube, Jul 03 '15 at 13:42
Sorry friend. I couldn't find the question being asked before. But I still don't know how to reduce the vertical space between buttons. Where can I find info on that? :) — André Sá, Jul 03 '15 at 13:49

Yandy_Viera · Answer 1 · 2015-07-03T14:07:45.143

Yes you can, if you will use bootstrap just add the class btn-block to your buttons, else add width: 100%, display: block; if you want that all buttons are (filling the width of the div) I add a script that set the class to all buttons, if not set the class only to the desired.

For remove the vertical space if you are using bootstrap just add this style

.btn-block + .btn-block{
    margin-top: 0;    
}

note that in the snippet I add !important that is because in the snippet the bootstrap's style is after mine but normally is not.

$(document).ready(function(){
    allbuttons = $(".button"); 
    allbuttons.addClass("btn-block");
})

.btn-block + .btn-block{
    margin-top: 0 !important;    
}
.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 10.5px 21px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 17px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="x">
<a href='#' class='button'>Button</a>
<a href='#' class='button'>Button</a>   
</div>

How can I extend the width of a button to fill the div's width

1 Answers1