.toolbar { height: 51px; display: flex; border-bottom: 1px solid #dddddd; background-color: #ffffff; } .toolbar .btn-groups { height: 30px; display: flex; margin-top: 10px; margin-left: 10px; overflow: hidden; border-radius: 3px; border: 1px solid #d2d2d2; background: linear-gradient(to bottom, #fefefe, #dcdcdc); } .toolbar .btn-groups .btn { height: 28px; line-height: 28px; padding-left: 27px; padding-right: 7px; position: relative; border-left: 1px solid #d2d2d2; } .toolbar .btn-groups .btn:before { content: ''; width: 1px; height: 100%; display: block; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom, #f9f9f9, #f4f4f4) } .toolbar .btn-groups .btn:first-of-type { border-left: 0; } .toolbar .btn-groups .btn:first-of-type:before { display: none; } .toolbar .btn-groups .btn:hover { color: #3a3a3a; } .toolbar .btn-groups .btn.add-btn { background: url('../images/add.png') no-repeat left; background-position-x: 7px; } .toolbar .btn-groups .btn.edit-btn { background: url('../images/edit.png') no-repeat left; background-position-x: 7px; } .toolbar .btn-groups .btn.delete-btn { background: url('../images/delete.png') no-repeat left; background-position-x: 7px; } .toolbar .btn-groups .btn.enable-btn { background: url('../images/enable.png') no-repeat left; background-position-x: 7px; } .toolbar .btn-groups .btn.disable-btn { background: url('../images/disable.png') no-repeat left; background-position-x: 7px; }