css - HTML Button Group: how to handle margin overwrite -


i´m building button group class, follows:

.ux-button-group button {   border-radius: 0;   z-index: -1;   margin: -4px; }  .ux-button-group button:first-child {     border-radius: 4px 0 0 4px; }   .ux-button-group button:last-child {     border-radius: 0 4px 4px 0;     margin-left: -1px; }  .ux-button-group button:not(:last-child):not(:first-child) {     margin-left: -1px; }  .ux-button-group button:only-child {     border-radius: 4px;     margin-left: 0; }  .ux-button-group button:hover {     z-index: 1; }  button {     background-color: transparent;     color: black;     border: 1px black solid;     margin: 0px; }    button:hover {   border-color: red; } 

and simple usage:

<div class='ux-button-group'>   <button input='text'>button 1</button>   <button input='text'>button 2</button>   <button input='text'>button 3</button> </div> 

all fine, expept when hover mouse button elements right margins not being shown in red, except last button.

please check bahaviour at fiddle here.

naturally happening because have 2 buttons sharing same margin (right margin of 1 button , left margin of next button in same position on screen).

i tought using z-index solve that, had no affect.

how can solve problem , let margin coloured accordingly on hover?

your z-index solution 1 step towards correct solution: remember work when elements applied is other position: static (which default style). long you:

  1. assign position: relative buttons
  2. remove z-index: -1 buttons

then things work:

.ux-button-group button {    border-radius: 0;     position: relative;    margin: -4px;  }    .ux-button-group button:first-child {      border-radius: 4px 0 0 4px;  }      .ux-button-group button:last-child {      border-radius: 0 4px 4px 0;      margin-left: -1px;  }    .ux-button-group button:not(:last-child):not(:first-child) {      margin-left: -1px;  }    .ux-button-group button:only-child {      border-radius: 4px;      margin-left: 0;  }    .ux-button-group button:hover {      z-index: 1;  }    button {      background-color: transparent;      color: black;      border: 1px black solid;      margin: 0px;  }      button:hover {    border-color: red;  }
<div class='ux-button-group'>    <button input='text'>button 1</button>    <button input='text'>button 2</button>    <button input='text'>button 3</button>  </div>

p/s: on side note, using display: inline , arbitrarily designated negative margin in order eliminate whitespace between elements flimsy way of making elements appear horizontally on list. can use float or flexbox:

example float:

in version of improved example, make sure clear float in parent: can done either setting overflow: hidden or using old clear fix hack.

.ux-button-group {   overflow: hidden; }  .ux-button-group button {   border-radius: 0;    float: left;        /* use float buttons */   position: relative; } 

.ux-button-group {    /* prevents parent's dimensions collapsing */    overflow: hidden;  }    .ux-button-group button {    border-radius: 0;     float: left;    position: relative;  }    .ux-button-group button:first-child {      border-radius: 4px 0 0 4px;  }      .ux-button-group button:last-child {      border-radius: 0 4px 4px 0;      margin-left: -1px;  }    .ux-button-group button:not(:last-child):not(:first-child) {      margin-left: -1px;  }    .ux-button-group button:only-child {      border-radius: 4px;      margin-left: 0;  }    .ux-button-group button:hover {      z-index: 1;  }    button {      background-color: transparent;      color: black;      border: 1px black solid;      margin: 0px;  }      button:hover {    border-color: red;  }
<div class='ux-button-group'>    <button input='text'>button 1</button>    <button input='text'>button 2</button>    <button input='text'>button 3</button>  </div>

example flexbox:

in second version of improved example, make use of css flexbox :)

.ux-button-group {   display: flex; } 

.ux-button-group {    display: flex;  }    .ux-button-group button {    border-radius: 0;     position: relative;  }    .ux-button-group button:first-child {      border-radius: 4px 0 0 4px;  }      .ux-button-group button:last-child {      border-radius: 0 4px 4px 0;      margin-left: -1px;  }    .ux-button-group button:not(:last-child):not(:first-child) {      margin-left: -1px;  }    .ux-button-group button:only-child {      border-radius: 4px;      margin-left: 0;  }    .ux-button-group button:hover {      z-index: 1;  }    button {      background-color: transparent;      color: black;      border: 1px black solid;      margin: 0px;  }      button:hover {    border-color: red;  }
<div class='ux-button-group'>    <button input='text'>button 1</button>    <button input='text'>button 2</button>    <button input='text'>button 3</button>  </div>


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -