Explore the community Forums Lectora Tips and tricks Make ZERO graphic weight buttons Reply To: Make ZERO graphic weight buttons

#391698 Score: 0
Profile photo of Zachary Liquorman
Zachary Liquorman
friend finder
curious george
wise owl
picture perfect
8 pts

I’m not sure if Lectora’s developers have updated the pre-built buttons since September 2016, but it’s worth noting that as of today they are still the product of 4 distinct images, 1 for each state. Moreover, any button text that you have is converted into a data URI (4 in total for each button, one for each state) which are then displayed over the buttons.

Data URIs will save on HTTP requests, but add to the total file size (it takes 4 characters to express 3 bytes of data, so each data URI usually weighs out to 1-1/3 times the size of the original binary without compression).  Why the developers went with a mix-and-match approach here I don’t know. Regardless, Lectora’s pre-built buttons are still adding weight to your files, making HTML/CSS-based alternatives superior as long as you’re not creating, like, 100 separate stylesheets or something, to the point that loading the CSS files become more burdensome than loading image files.


On the subject of CSS-buttons it may be of interest to those working on their own that Lectora applies its own CSS affecting the focus selector to your content (trivantis-focus.css). This has the effect of drawing a border around your content when clicked.

I believe the implementation of this has changed since the time of the OP, because in the example Darrel provided above, the border is actually hidden by his button. It appears that the padding on his button is covering the focus-border (since the padding would be created outside of the div it might make sense that this got layered on top of the border in an earlier implementation of the focus styling).

Still, if you want to remove the border that appears when you click your CSS buttons today, you can add this to your CSS:

.YourButtonClass:focus {
border: none;
border-radius: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
This will override the earlier focus styling and prevent a border form being drawn around your button. The pre-built buttons don’t have a visual border appear by default either. My guess is, this was a safety net to preserve 508/WCAG 2.0- compliance should you create a button (or other focusable object) that was otherwise not compliant.