On this page

Also see AFx 8-O Nav Bar Buttons

---

Large & Extra Large Toolbar Buttons

By Ken Saunders

Why (you may ask) would anyone need such large buttons? Lots of reasons.

• They may have a visual impairment
• They may not have perfect eyesight
• They may have a cognitive disability
• Perhaps they use high resolution monitor settings, or a wide screen
• Because 20x20 pixel icons (default Firefox size) are just too small

---

Usage, Potential Conflicts

The icon sizes are 48x48 pixels, and 64x64, but the overall button sizes are larger when taking the button backgrounds into consideration. Even larger when using "Icons and Text".

One thing to keep in mind is when you open the Customize Toolbar window, you will see the default Firefox icons, or the ones from a theme that you may be using. Reason being is that these nav bar button sets are extensions and not themes. Once you drag a button to the nav bar, you'll see the large one from the set that you've installed.

One other note. Selecting "Use Small Icons" does nothing more than reduce the padding between the buttons. This will be changed when time permits.

I made the button sets as extensions and not themes so that they will work with most Firefox themes and all Personas. One conflict that you may come across if using these with Firefox themes is when the theme developer sets their own hover and active icons. My button backgrounds use CSS only.

Click to enlarge the preview

HC Big, & Bigger Buttons

These high contrast toolbar button sets are available in either 48x48 pixel sized icons, or 64x64.
The buttons use CSS3 (-moz-linear-gradient and box-shadow) for the 2 different button states that emphasizes an action including hovering over a button, and clicking on one. I'd like to mention again, while these sets can be used with Firefox themes, there may be conflicts when the theme author uses different icons or alignment settings for the hover and active states of the buttons.

---

HC Big Buttons and HC Bigger Buttons Licensing Information

The graphics contained in the HC Big Buttons and HC Bigger Buttons Firefox extensions are licensed under the following Creative Commons license in the spirit of openness and the hope that they'll be used to create large Firefox themes or for other purposes related to improving accessibility for all.
Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0)

Attribution:
Ken Saunders - http://www.AccessFirefox.org

---

Install Instructions

Click on the install link for the icon set that you'd like to use.
Firefox will show a prompt asking you to allow AccessFirefox.org permission to install an add-on.
After Firefox downloads the add-on, you'll be prompted to install it. Click on the "Install Now" Button" After installation, click on the "Restart Now" button.
Be sure to disable or uninstall a button set before installing additional ones.

Click to enlarge the preview

---

HC Big, HC Bigger Buttons Bright

Click to enlarge

Install HC Big Buttons Bright (48px)

Install HC Bigger Buttons Bright (64px)

---

HC Big, HC Bigger Buttons Dark

Click to enlarge

Install HC Big Buttons Dark (48px)

Install HC Bigger Buttons Dark (64px)

---

Partially Transparent toolbar buttons

If you have the Stylish Add-ons installed, you can have semi-transparent backgrounds for the HC Big and HC Bigger Buttons by using the Partially Transparent toolbar buttons userstyle.
Get the userstyle here, or, you can use the code below.

/*Partially Transparent toolbar buttons code for the HC Big and HC Bigger Buttons add-ons. Style by Ken Saunders - www.AccessFirefox.org*/ #nav-bar .toolbarbutton-1, .toolbarbutton-menubutton-button, .toolbarbutton-menubutton-dropmarker { box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3) !important; -moz-appearance: none !important; background-color: transparent !important; background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%) !important; border: none !important; } #nav-bar .toolbarbutton-1:hover, .toolbarbutton-menubutton-button:hover, .toolbarbutton-menubutton-dropmarker:hover { box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4) !important; -moz-appearance: none !important; background-color: transparent !important; background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 5%, rgba(255, 255, 255, 0) 50%) !important; border: none !important; -moz-transition: none !important; border: none !important; } #nav-bar .toolbarbutton-1:active, .toolbarbutton-menubutton-button:active, .toolbarbutton-menubutton-dropmarker:active { box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 1) !important; -moz-appearance: none !important; background-color: transparent !important; background-image: none !important; border: none !important; } #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon { box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4) !important; -moz-appearance: none !important; background-color: transparent !important; background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 5%, rgba(255, 255, 255, 0) 50%) !important; border: none !important; -moz-transition: none !important; border: none !important; }

Screen shots with the Partially Transparent toolbar buttons userstyle enabled.

HC Big Buttons Dark (48px)

HC Bigger Buttons Dark (64px)

HC Big Buttons Bright PT (48px

HC Bigger Buttons Bright (64px)

Questions?
Ken Saunders - at - AccessFirefox.org