Please suggest the error in my code.

Question

On hover at the button, why the 4 corners are visible for faction of a second. This is to be corrected. Your help is required.
The code is:-
https://code.sololearn.com/W6b4knROx81J/?ref=app

Answer 1

You don't exactly need to use a tag if you are not willing to redirect user to somewhere. Simply replace them with a block level element. Eg: <p>

And obhiously output would differ in android, ios and pc👍, nice point there!

Answer 2

Please link a code.

Answer 3

Dushyant Kumar Tyagi

It seems that we both learn something new today.

Answer 4

Finding difficulty in copying the code.
Finally succeeded.
Please refer the code . I have edited the post.

Answer 5

Add border-radius:50px; to a:hover:before

Answer 6

Well, that is coming from <a> tag you're using.
When user clicks a tag it makes a box around it to show it is been clicked.

You can use button tag instead of a tag, which is more suitable for it.

Answer 7

Dushyant Kumar Tyagi

I was using an iOS device when I first looked at your code and adding the border-radius solved the problem on my iOS device. But the android app is different and Rick Grimes is correct when he suggests using a button tag.

You can nest the <a> tag inside of the button tag and remove the focus outline. That should solve the four corners problem.

https://code.sololearn.com/Wm2sl2tH2E4k/#html

Answer 8

Yes it worked. Thank for that.
But there seems to be whitish border of marginal thickness of about 2px, covering the left & top of the button on hover. How to cancel it?

Answer 9

Absolutely perfect!!
100% solution done. And thanks a lot . It helped me today in my learning.

Answer 10

That sounds great, Im glad I could help.

Answer 11

I'm glad that things worked out for you, but you don't need to wrap the <a> tag inside <button> tag, you just need button tag.

Since you won't be able to use href with button tag, you can use window.location.href on onclick event.

Answer 12

Yes, exactly.

Answer 13

Omar Samir Please post answers related to this question.

Answer 14

Marzan thanks:

Answer 15

Dushyant Kumar Tyagi

If you don't mind, will you please let me know what device you are using?

Answer 16

Smartphone

Answer 17

Correct.
I am working on that.

Answer 18

add border:0; to botton{}

Answer 19

Correct

Answer 20

Any one arbic