Kortom, ik hou van de manier waarop <input type="submit">is opgemaakt, met de klikbare knop wanneer je een beetje CSS toevoegt. Normale knoppen zijn echter niet als zodanig gestileerd, ze hebben geen klikbaarheid zonder een aantal belangrijke CSS of JS, en je moet afbeeldingen gebruiken.
Ik heb verzendknoppen in koppelingen gemaakt door de formulieractie te gebruiken, maar hiervoor moet ik voor elke knop een nieuw formulier maken. Hoe vind ik een gulden middenweg? Het gebruik van meerdere formulieren veroorzaakt problemen in mijn stijl die ik niet kan oplossen, tenzij ik een andere manier vind om knoppen te maken die links in HTML zijn, die een standaardstijl hebben waardoor ze een ingedrukte status hebben (en dat bedoel ik niet standaardinstellingen van de browser).
Enig idee?
Antwoord 1, autoriteit 100%
<a href="#"><button>Link Text</button></a>
Je hebt gevraagd om een link die eruitziet als een knop, dus gebruik een link en een knop 🙂 Hierdoor blijft de standaardstijl van de browserknop behouden. De knop zelf doet niets, maar door erop te klikken wordt de bovenliggende link geactiveerd.
Demo:
<a href="http://stackoverflow.com"><button>Link Text</button></a>Antwoord 2, autoriteit 17%
BELANGRIJK:
<button>mag nooit een afstammeling zijn van<a>.
Probeer <a href="http://stackoverflow.com"><button>Link Text</button></a>in een html-validator zoals https://validator.w3.orgen je krijgt een foutmelding. Het heeft echt geen zin om een knop te gebruiken als je nietde knop gebruikt. Stijl de <a>gewoon met css om eruit te zien als een knop. Als u een framework zoals Bootstrap gebruikt, kunt u de knopstijl(en) btn, btn-primaryenz. toepassen.
jsfiddle : link in knopstijl
.btnStack {
font-family: Oswald;
background-color: orange;
color: white;
text-decoration: none;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
a.btnStack:hover {
background-color: #000;
}<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>Antwoord 3, autoriteit 11%
Gebruik javascript:
<button onclick="window.location.href='/css_page.html'">CSS page</button>
U kunt altijd de knop in CSS Anyaways stylen. Ik hoop dat het geholpen is!
Veel succes!
Antwoord 4, Autoriteit 6%
U hebt drie opties:
-
Style-links om eruit te zien als knoppen met behulp van CSS.
Kijk gewoon naar de lichtblauwe “tags” onder uw vraag.
Het is mogelijk, zelfs om ze een depressief uiterlijk te geven wanneer erop is geklikt (met behulp van pseudo-klassen zoals: actief), zonder enige scripting. Veel belangrijke sites, zoals Google, beginnen tegenwoordig knoppen uit CSS-stijlen te maken, toch, scripting of niet.
-
Plaats een apart en lt; formulier & GT; element rond elk.
Zoals u vermeldde in de vraag. Gemakkelijk en zal zeker werken zonder Javascript (of zelfs CSS). Maar het voegt een beetje extra code toe die mogelijk slordig kan uitzien.
-
Vertrouwen op JavaScript.
Wat is wat u zei dat u niet wilde doen.
Antwoord 5, Autoriteit 2%
Een beetje gemakkelijker en het lijkt precies op de knop in het formulier. Gebruik gewoon de invoer en wikkel het ankertag eromheen.
<a href="#"><input type="button" value="Button Text"></a>
Antwoord 6, Autoriteit 2%
<a id="reset-authenticator" asp-page="./ResetAuthenticator"><input type="button" class="btn btn-primary" value="Reset app" /></a>Antwoord 7
De 3 gemakkelijkste manieren waarop IMHO
is
1: je maakt een afbeelding van een knop en plaatst er een href omheen. (Geen goede manier, je verliest flexibiliteit en zorgt voor veel moeilijkheden en problemen.)
2 (De gemakkelijkste) -> JQuery
<input type="submit" someattribute="http://yoururl/index.php">
$('button[type=submit] .default').click(function(){
window.location = $(this).attr("someattribute");
return false; //otherwise it will send a button submit to the server
});
3 (ook makkelijk, maar ik heb liever de vorige):
<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue">
$fn.somefunction= function(url) {
window.location = url;
};