Click here to Skip to main content
15,745,335 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Why am i ONLY able to use class="btn" inside the < a > attribute and not inside the < button > attribute or the < input > attribute ??
When i put it inside < button > or < input > it works but not the same as for < a > < /a > , the hover doesn't work on < button > or < input > attributes

<td><button class="btn" type="submit">Se Connecter</button></td>
<td><a class="btn" href="ajout.php">S'inscrire</a></td>

	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%,-50%);
	border: 1px solid #fff;
	padding: 10px 30px;
	color: #fff;
	text-decoration: none;
	transition: 0.6s ease;
background-color: #fff;
color: #000;

What I have tried:

I am in a case where i have to use because i need the Submit type;
i tried:
<td><a class="btn"><button  type="submit">Se Connecter</button></a></td>

shows two type of button, the basic and the css-styled one together on top of each other.
Updated 15-Jan-21 11:01am
Richard Deeming 14-Dec-20 4:25am    
Adding your class to a <button> or an <input> works fine for me:
Edit fiddle - JSFiddle - Code Playground[^]

1 solution

This is a mess:
<td><a class="btn"><button  type="submit">Se Connecter</button></a></td>
because you are taking a button and then inside of a table cell but you are then wrapping a link around the button. From HTML point of view (that's what's in control of the actions) you've given the same rendered object to jobs to do concurrently - and it will pick one, probably the out like element, as the live one.

:hoover is for how a link behaves (I cause them to "light up" in red, on hover. An element will simply ignore attributes that do not apply to it.

I cannot see the rest of your code, but an input button of type="submit" is only useful in a <form> a button element only does something if you give it an event, almost always onclick=

You need to reorganize in your head what you want the button to do and check into how the HTML works (for actions) and CSS (for :hoover).
Share this answer
Richard MacCutchan 14-Dec-20 17:27pm    
I thought :hoover had something to do with garbage collection. :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900