Menu
We have an ongoing discussion at my job about the best way to deploy buttons over our websites. Some art directors ask for the buttons in pure CSS, I prefer to make Spritesheets in Photoshop. My argument- the kerning, text-effects like drop-shadow and aliasing all look better coming out of Photoshop. Their argument- you lose SEO points, translation engines can't change the buttons.
I'm sure there are arguments for both sides- am I missing something obvious for either of these arguments?
606
Pure CSS Buttons icons Classes: There is no predefined class for icons, you can put the font awesome icon between button elements as we used to put in normal html Font Awesome Icons: Font-awesome is a web icon library that gives you scalable vector icons that can be customized in terms of color, size, and in many more aspects.
Pure CSS Primary Button is used to create a primary action button. The primary button is created using Pure CSS class. pure-button-primary: This class is used to create the primary action button. his class is used alongside “pure-button” class. <a class="pure-button pure-button-primary" href="#"> Primary Button </a>
They are also very customizable so you can only use components that you need. There are quite a few CSS frameworks out there but one of the most popular CSS frameworks is Bootstrap, developed by Twitter and a popular choice among WordPress, Drupal, and Joomla developers.
However, unless you use SASS indented syntax and SASS-specific functionality like functions and variables, SASS/SCSS is a superset of CSS and. you should be OK using pure CSS, understanding that CSS custom properties do not work the same as SASS variables and other specific things
Well, for one, pure CSS buttons will certainly load faster, as they are only some very few lines of code. Many things can't be done in CSS/JS, those will have to be images, and will consume much bandwidth. But where you can save bandwidth, you should. This alone is a killer argument if speed is a priority for your project.
.
About effects looking better out of Photoshop... I wouldn't neccessarily agree here. I really don't think the browser implementations look bad in any way, so you would have to beat those, first.
.
Also, drawing a button image will likely cost more time than writing some lines of code. Same applies for changing the button. Maintainability is on CSS side ;)
.
I don't think the translation argument applies. If a "localization engine" can handle different CSS style/style classes/texts for different languages, it should be able to handle different images/sprites for different languages just as well.
.
About SEO: If you have a fallback text for a button or image (in case it cannot be loaded, IMO standard behaviour), that should apply to search engines as well as any string does. Though I'm not 100% sure here.
110
Another possible argument for using pure CSS rather than images is speed. Depending on how many buttons you have, it could take a considerable amount of time longer to load the images rather than CSS/plain-text.
Making things faster is always a big deal in software development.
32
1- speed, css loads much faster than images
2- bandwidth, if you have 20 buttons trough all your website and 50000 unique users each day, it really makes an impact.
3- SEO boost, searchers prefer css to images, and of course above all text.
now, with images you can do things css cant (not for now at least).
It all depends on what you want to accomplish, the kind of website you want to make. The audience you focus on.
Look at Stackoverflow, it has little images. The rest is all pure css.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
