Make buttons responsive on PureCSS?

1 Views

I am currently working on a WordPress Social Sharing plugin. I am using PureCSS to make the sharing buttons and I have succeed. But I want to make them responsive, so that the “width” changes based on the device/display size.

P.S: I tried @media queries but would like to know if there is any other way to make it fully responsive.

Read More

If there is any other CSS Modules like purecss or bootstrap that has responsive buttons, please let me know 🙂

Please gelp.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. If you are talking about http://purecss.io/buttons/ then all you need to do is add width:100% to the .pure-button css

    .pure-button {font-family: inherit; font-size: 100%; padding: .5em 1em; color: #444; color:rgba(0,0,0,.8); border: 1px solid #999; border: 0 rgba(0,0,0,0); background-color: #E6E6E6; text-decoration: none; border-radius: 2px; width: 100%;

    }

    This will make the button responsive but it will fill whatever container it is put in so you would have to wrap it in another div to control the full width ala: http://jsfiddle.net/0z6ykw00/

    You will still need to use media queries to resize the font depending upon your application.

    Hope that helps