Responsive Rounded Buttons
Last week I wanted to create three rounded buttons for a client’s site.
I didn’t keep it in the design but here is some code and explaination of how this is done for responsive cases.
First of all our button needs to have a wrapper with a width. For our example we are going to use a list.
Now, each button needs to have 100% width and magic trick number 1: we give a zero height and a
padding-bottom: 100% to resize the height fluidly. And
overflow: hidden to hide the remaining color of the link.
For the next part, our link needs to have
padding-top: 50%; &
padding-bottom: 50%; to be in the “middle” of the link and a
margin-top half the size of the
line-height to create an “absolute middle”. It’s the same logic with absolute centering things.
Here is a demo of what we created and the sass code for it.
That’s all you need to know to work with rounded buttons. Below there is a new “section” you can check out about status when I write each post.
Maybe it works for you too :).