Title: replace “button” with “a” Last modified: February 10, 2018 --- # replace “button” with “a” * Resolved [vent](https://wordpress.org/support/users/ventair/) * (@ventair) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/) * Hello, * very good plugin, but with my theme Hamilton (or Oria), for a good display, i have replace: * ```
``` * with * ```
``` * and * ``` ``` * with * ` ` otherwise I had too many icons at top bar or bad shadows on the arrows. * The original code works good with my old theme like Fukasawa or Rams (no change needed) ???? Viewing 11 replies - 1 through 11 (of 11 total) * Plugin Author [Arno Welzel](https://wordpress.org/support/users/awelzel/) * (@awelzel) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9962169) * Please specify, what “good display” means. What happened when “button” was used instead of “a”? * Thread Starter [vent](https://wordpress.org/support/users/ventair/) * (@ventair) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9964448) * For a better understanding, here are screenshots: [Good Display](http://images.leventaire.fr/wordpress/plugins/lightbox-with-photoSwipe/good-display.png) with “a” or “compatible theme” * [too many icons at top bar](http://images.leventaire.fr/wordpress/plugins/lightbox-with-photoSwipe/too-many-icons-at-top-bar.png) with Hamilton theme * [bad shadow](http://images.leventaire.fr/wordpress/plugins/lightbox-with-photoSwipe/bad-shadows-mouse-hover.png) on mouse over “next” or prev” with Oria theme - This reply was modified 8 years, 3 months ago by [vent](https://wordpress.org/support/users/ventair/). * Plugin Author [Arno Welzel](https://wordpress.org/support/users/awelzel/) * (@awelzel) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9970444) * Thanks for the screenshots. * It seems there is a problem with CSS rules which define styles for “button” elements which don’t get replaced by the PhotoSwipe UI styles. I’ll fix that. * Plugin Author [Arno Welzel](https://wordpress.org/support/users/awelzel/) * (@awelzel) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9970922) * Fixed with release 1.8. * Thread Starter [vent](https://wordpress.org/support/users/ventair/) * (@ventair) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9970975) * OK, * All works good! With my two themes! * Thanks * _but I found another problem with two new themes by Anders Norén! (I created a new topic)_ * Plugin Author [Arno Welzel](https://wordpress.org/support/users/awelzel/) * (@awelzel) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9972657) * Unfortunately this introduced a new problem: * Some browsers have a problem, if the UI elements are not `button` – e.g. Firefox for Android. Also `a` is not working properly. That’s the reason, why `button` was used originally by PhotoSwipe. * This leads to the situation, that the “fullscreen” button does not work in Firefox for Android when using `div` and when using `a` it seems to work but then also“ zoom” will triggered as well. * I’ll have to sort this out for the next update. * Thread Starter [vent](https://wordpress.org/support/users/ventair/) * (@ventair) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9972708) * I haven’t smartphone or tablet to test Android or IOS… * My idea to replace ‘button’ with ‘a’ comes from this plugin: [Easy Photography Portfolio](https://wordpress.org/plugins/photography-portfolio/) * You can simply test the rendering with both test sites: [http://default.portfolio.bycolormelon.com/portfolio/colors-and-patterns/](http://default.portfolio.bycolormelon.com/portfolio/colors-and-patterns/) [http://befree.bycolormelon.com/portfolio/darte-shop/](http://befree.bycolormelon.com/portfolio/darte-shop/) * I look quickly in the css themes! * Thread Starter [vent](https://wordpress.org/support/users/ventair/) * (@ventair) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9972775) * For Hamilton, here is the css problematic, with my knowledge, I did not find the line involved: * ``` button, .button, input[type="button"], input[type="submit"] { background: #000; border: none; border-radius: 0; color: #fff; display: inline-block; font-family: inherit; font-size: 16px; font-weight: 700; min-width: 120px; padding: 16px 24px 18px; text-align: center; -moz-appearance: none; -webkit-appearance: none; } button, .button, input[type="button"]:hover, input[type="submit"]:hover { cursor: pointer; } .dark-mode button, .dark-mode .button, .dark-mode input[type="button"], .dark-mode input[type="submit"] { background: rgba( 255, 255, 255, .25 ); transition: background .2s ease-in-out; } .dark-mode button:hover, .dark-mode .button:hover, .dark-mode input[type="button"]:hover, .dark-mode input[type="submit"]:hover { background: rgba( 255, 255, 255, .3 ); } ``` * with dark-mode, rendering is different (screen capture with 1.7 version, works good with 1.9): [exemple-dark-mode](http://images.leventaire.fr/wordpress/plugins/lightbox-with-photoSwipe/button-top-bar_dark-mode.png) - This reply was modified 8 years, 3 months ago by [vent](https://wordpress.org/support/users/ventair/). * Thread Starter [vent](https://wordpress.org/support/users/ventair/) * (@ventair) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9973037) * The css overwrite Photoswipe button for Oria: * ``` button:hover, .button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: #17191B; color: #fff; text-decoration: none; } ``` * ``` button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } ``` * Plugin Author [Arno Welzel](https://wordpress.org/support/users/awelzel/) * (@awelzel) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9975093) * I finally found the missing CSS rules to make sure, that `button` elements displayed properly as well even in Hamilton in Oria. The next update will contain the fixes. * Thread Starter [vent](https://wordpress.org/support/users/ventair/) * (@ventair) * [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9976496) * All works good, * without this little problems, this plugin is really in the top of free lightbox for WordPress! Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘replace “button” with “a”’ is closed to new replies. * ![](https://ps.w.org/lightbox-photoswipe/assets/icon-256x256.png?rev=2906302) * [Lightbox with PhotoSwipe](https://wordpress.org/plugins/lightbox-photoswipe/) * [Frequently Asked Questions](https://wordpress.org/plugins/lightbox-photoswipe/#faq) * [Support Threads](https://wordpress.org/support/plugin/lightbox-photoswipe/) * [Active Topics](https://wordpress.org/support/plugin/lightbox-photoswipe/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/lightbox-photoswipe/unresolved/) * [Reviews](https://wordpress.org/support/plugin/lightbox-photoswipe/reviews/) * 11 replies * 2 participants * Last reply from: [vent](https://wordpress.org/support/users/ventair/) * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/replace-button-with-a/#post-9976496) * Status: resolved