Automatic responsive button styles is a great feature and has worked pretty well so far. But it does not fit in all situations. Sometimes users need more control on how a button should appear on tablet and on mobile screens.
For the past few days I have been working on a way to provide users the ability to create responsive buttons. Responsive button styles is the new feature in Buttons X v1.9.0. Now you will have more control on how buttons are displayed on smaller screens (tablet and mobile).
Automatic responsive styles used in previous versions is turned off by default so if you have a lot of buttons then you can turn this ON (from the settings page under general settings) until you have configured responsive styles for each button.
So basically the button is now divided into three views Desktop, Tablet and Mobile. Desktop view is the default view. In order to configure tablet and mobile views, first of all you need to go to settings page (Buttons X > Settings > Responsive).
Responsive Button Settings
Under responsive settings you should see two fields namely, Tablet Width and Mobile Width. By default the tablet screen size is set to “768” pixels and mobile screen size is set to “480” pixels. You can change these values based on your theme. Tablet width of 768 pixels means if the screen size goes below 768 pixels then tablet view is triggered. And similar for mobile view, if the screen size goes below 480 pixels then mobile view is triggered.
Responsive Button Options
Now lets check out responsive button options. Move to button edit screen (Buttons X > Buttons > Add New / Edit ). You can create a new button or edit an existing one. If you are new to Buttons X then make sure you first read how to create a simple button.
The first noticeable change you should see is under Live Preview. The three icons for the three views Desktop, Tablet and Mobile. Clicking on Tablet view will show how the button will appear on a tablet and same for mobile and desktop.
Now under Buttons X – Options Panel, click Advanced tab and then Responsive. Under it you will have options for tablet and mobile views. Under both you should see options such as “Layout”, “Primary Text”, “Secondary Text”, “Icon” and “Padding”. I have included only those options that effect the view of a button (no unnecessary options). All the options are similar to the ones we already had but these will effect a respective view, tablet or mobile.
Buttons X v1.9.0 will be available in 48 hours. You should be able to automatically update the plugin from your dashboard if you have set up automatic updates. Please keep sending your suggestions through email or through the comment section below.