Experience-Driven Insights

#filterBtns * { box-sizing: border-box; } #filterBtns { text-align: left; width: 600px; } @media (max-width: 500px) { #filterBtns { width: 100%; } } #filterBtns ul { padding: 0 !important; } #filterBtns ul li { display: inline; text-align: center; } #filterBtns a { font-family: 'Source Sans Pro',Helvetica,Arial,Lucida,sans-serif; font-size: 17px; font-weight: bold; display: inline-block; width: 19%; padding: .75rem 0; margin: 0; text-decoration: none; color: #313131; } /* active button */ .df-activebutton:nth-child(2) ~ hr { margin-left: 19% !important; } .df-activebutton:nth-child(3) ~ hr { margin-left: 39% !important; } .df-activebutton:nth-child(4) ~ hr { margin-left: 59% !important; } .df-activebutton:nth-child(5) ~ hr { margin-left: 78% !important; } /* hover */ .df-button:nth-child(1):hover ~ hr { margin-left: 0% !important; } .df-button:nth-child(2):hover ~ hr { margin-left: 19% !important; } .df-button:nth-child(3):hover ~ hr { margin-left: 39% !important; } .df-button:nth-child(4):hover ~ hr { margin-left: 59% !important; } .df-button:nth-child(5):hover ~ hr { margin-left: 78% !important; } #filterBtns hr { height: .25rem; width: 19%; margin: 0; background: #6ed9a7; border: none; transition: .3s ease-in-out; }