How to put background color *behind* bootstrap button

Question

I'm trying to have an input appear when a button is clicked but then I want a background all the way around both the button and the input. Currently, my markup renders like the following:

So when the click reason, I basically want the yellow (alert-warning) background around the Reason button and the input. My markup looks like this:

div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-width: 0;
    padding-bottom: 20px;
    z-index: 1;
}
div.saveReasonDetail {
    z-index: 0;
}



    Save
    Reason
    Cancel

My problems are:

1) I don't want the border underneath the button...I want the border to only be no the 'outside' of the yellow.

2) I want the yellow background to extend just a bit outside of the reason button (without affecting the margins between the buttons already in place).

Is this possible?

Update: I got valid answers from Kareem Dabbeet and Chase Ingebritson. Kareem was first marked as answer, but not being an expert in HTML, I'm thinking the comment Chase made about a 'same container' seems to be important. Make sure to review his answer as well.

user_11261518 · Answer

For the first question:

Just edit div.saveReasonDetail position and make it inherit:

div.saveReasonDetail {
    position: inherit;
}

now edit border-bottom color for the saveReason to make it the same as 'saveReasonDetail' bg-color:

border-bottom-color: #FFF3CD

For the second question: To simiulate a m-2 between each button, you need to change margin-right on the save button to m-1 and add padding left/right with the same value for the reason button like this:

    .SaveEdits { 
      margin-right: 0 !important;
    }

    div.saveReason { 
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-top: 10px;
    }

I colored "cancel" link to insure that margins are alright

Here is the final result

div.main { 
    padding-top: 20px; 
}
div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-color: #fff3cd;
    padding-bottom: 20px;
    padding-top: 10px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    z-index: 1;
}
div.saveReasonDetail {
   position: inherit;
}

.SaveEdits { 
margin-right: 0 !important
}
.CancelEdits { 
background-color: purple !important;
}



    Save
    Reason
    Cancel

user_5026438 · Answer

In this case, you would probably want to put both the button element and the textfield element in the same container. Once they share a common parent, you can set the textfield's position to be absolute and it won't affect the position of the other buttons.

div.main { padding-top: 20px; }
div.saveReason {
  background-color: #fff3cd;
  border: solid 1px #ffeeba;
  border-bottom-width: 0;
  z-index: 1;
  
  display: inline-block;
  padding: 10px;
}

.saveReason > .btn {
  margin-right: 0 !important;
}

div.saveReasonDetail {
  z-index: -1;
  
  position: absolute;
  width: 100%;
  left: 0;
}

user_11607676 · Answer

This is your solution

div.main { 
    padding-top: 20px; 
}
div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-color: #fff3cd;
    padding-bottom: 20px;
    padding-top: 6px;
    z-index: 1;
}
div.saveReasonDetail {
   position: inherit;
}

.SaveEdits { 
margin-right: 0 !important
}
.CancelEdits { 
background-color: purple !important;
}



    Save
    Reason
    Cancel

How to put background color behind bootstrap button

3 Answers