Joy
(@joyously)
For accessibility, links should look and act like links, and buttons should be buttons. Buttons should not navigate to another page, whereas links do.
Given that, you can use padding and a border and box-shadow to style your link to look like a button. (But it’s better if you do not.)
For accessibility, links should look and act like links, and buttons should be buttons. Buttons should not navigate to another page, whereas links do.
On top right corner of this page, there is a link that looks like a button “get wordpress” and it navigates to another page, so I realy did not understood how you mean this.
Given that, you can use padding and a border and box-shadow to style your link to look like a button. (But it’s better if you do not.)
But the problem is. it doesn’t work! I used padding etc, it styles the link, but it does not expand the clickable area like it would do for a a element. The a element i tried wrapping around doesn’t work with this href.
That is the problem here.
Joy
(@joyously)
Yes, there are a lot of examples of poor design choices on this site. There are also Trac tickets for fixing them. It’s a slow process, and it’s best to avoid creating more of those bad design things on the web.
Your first example code is better than your second, because the function outputs a link already, and can’t be inside another link. But you need to style
.login a { padding: 1em; etc.
and not just login.
Thank you!
Now mobile users can touch it easier.
The .login a solved this problem! …half.
How do I get a Icon inside the active link component as well?
<div class="login"><i class="fa fa-user-o" aria-hidden="true"></i><?php wp_register('', ''); ?></div>
I added the icon <i class="fa fa-user-o" aria-hidden="true"> to themes translation file
