Hoe maak je een HTML-knop die werkt als een link

Ik wil een HTML-knop maken die als een link fungeert. Dus wanneer u op de knop klikt, wordt deze omgeleid naar een pagina. Ik wil dat het zo toegankelijk mogelijk is.

Ik zou het ook willen, zodat er geen extra tekens of parameters in de URL staan.

Hoe kan ik dit bereiken?


Op basis van de antwoorden die tot nu toe zijn gepost, doe ik dit momenteel:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

maar het probleem hiermee is dat in Safari en Internet Explorer, het voegt een vraagteken toe aan het einde van de URL. Ik moet een oplossing vinden die geen tekens aan het einde van de URL toevoegt.

Er zijn twee andere oplossingen om dit te doen: JavaScript gebruiken of een link opmaken om eruit te zien als een knop.

JavaScript gebruiken:

<button onclick="window.location.href='/page2'">Continue</button>

Maar hiervoor is uiteraard JavaScript nodig, en om die reden is het minder toegankelijk voor schermlezers. Het doel van een link is om naar een andere pagina te gaan. Dus proberen een knop als een link te laten werken, is de verkeerde oplossing. Mijn suggestie is dat je een link en moet gebruiken stijl het zodat het eruit ziet als een knop.

<a href="/link/to/page2">Continue</a>

Antwoord 1, autoriteit 100%

HTML

De eenvoudige HTML-manier is om het in een <form> te plaatsen waarin u de gewenste doel-URL opgeeft in het kenmerk action.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

Stel indien nodig CSS display: inline; in op het formulier om het in de flow te houden met de omringende tekst. In plaats van <input type="submit"> in het bovenstaande voorbeeld, kunt u ook <button type="submit"> gebruiken. Het enige verschil is dat het element <button> kinderen toestaat.

Je zou intuïtief verwachten dat je <button href="https://google.com"> analoog aan de <a> kunt gebruiken element, maar helaas nee, dit kenmerk bestaat niet volgens de HTML-specificatie .

CSS

Als CSS is toegestaan, gebruik dan gewoon een <a> die je stijlt om eruit te zien als een knop met behulp van onder andere de appearance eigenschap (het wordt alleen niet ondersteund in Internet Explorer).

<a href="https://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    color: initial;
}

Of kies een van de vele CSS-bibliotheken zoals Bootstrap.

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

Als JavaScript is toegestaan, stelt u window.location.href in.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

In plaats van <input type="button"> in het bovenstaande voorbeeld, kunt u ook <button> gebruiken. Het enige verschil is dat het element <button> kinderen toestaat.


Antwoord 2, autoriteit 30%

<button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

Antwoord 3, autoriteit 18%

Als u op zoek bent naar het uiterlijk van een knop in een eenvoudige HTML-ankertag, kunt u de Twitter Bootstrap framework om een ​​van de volgende veelvoorkomende HTML-links/knoppen op te maken om als een knop te verschijnen. Let op de visuele verschillen tussen versie 2, 3 of 4 van het framework:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) voorbeeldweergave:

Voorbeelduitvoer van Boostrap v4-knoppen

Bootstrap (v3) voorbeeldweergave:

Voorbeelduitvoer van Boostrap v3-knoppen

Bootstrap (v2) voorbeeldweergave:

Voorbeelduitvoer van Boostrap v2-knoppen


Antwoord 4, autoriteit 7%

Gebruik:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Helaas is deze opmaak niet langer geldig in HTML5 en zal niet valideren en ook niet altijd werken zoals verwacht. Gebruik een andere aanpak.


Antwoord 5, autoriteit 6%

Vanaf HTML5 ondersteunen knoppen het formaction attribuut. Het beste van alles is dat er geen JavaScript of bedrog nodig is.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Antwoord 6, autoriteit 3%

Het is eigenlijk heel eenvoudig en zonder enige vormelementen te gebruiken. Je kunt gewoon de <a>-tag gebruiken met een knop erin :).

Zoals dit:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

En het zal de href op dezelfde pagina laden. Wil je een nieuwe pagina? Gebruik gewoon target="_blank".

BEWERKEN

Een paar jaar later, terwijl mijn oplossing nog steeds werkt, moet u er rekening mee houden dat u veel CSS kunt gebruiken om het eruit te laten zien zoals u wilt. Dit was gewoon een snelle manier.


Antwoord 7, autoriteit 2%

Als je een inside-formulier gebruikt, voeg dan het attribuut type=”reset” toe samen met het button-element. Het voorkomt de formulieractie.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

Antwoord 8

<form>
    <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> 
</form>

Antwoord 9

Er lijken drie oplossingen voor dit probleem te zijn (allemaal met voor- en nadelen).

Oplossing 1: knop in een formulier.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

Het probleem hiermee is echter dat in sommige versies van populaire browsers, zoals Chrome, Safari en Internet Explorer, een vraagteken aan het einde van de URL wordt toegevoegd. Met andere woorden, voor de bovenstaande code ziet uw URL er uiteindelijk als volgt uit:

http://someserver/pages2?

Er is een manier om dit op te lossen, maar hiervoor is configuratie aan de serverzijde vereist. Een voorbeeld van het gebruik van Apache Mod_rewrite zou zijn om alle verzoeken met een afsluitende ? om te leiden naar hun corresponderende URL zonder de ?. Hier is een voorbeeld van het gebruik van .htaccess, maar er is hier een volledige thread:

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Vergelijkbare configuraties kunnen variëren, afhankelijk van de gebruikte webserver en stack. Dus een samenvatting van deze aanpak:

Pluspunten:

  1. Dit is een echte knop, en semantisch is het logisch.
  2. Omdat het een echte knop is, zal het ook werken als een echte knop (bijv. versleepbaar gedrag en/of een klik nabootsen wanneer je op de spatiebalk drukt wanneer deze actief is).
  3. Geen JavaScript, geen complexe stijl vereist.

Nadelen:

  1. Trailing ? ziet er in sommige browsers lelijk uit. Dit kan worden opgelost door een hack (in sommige gevallen) met POST in plaats van GET, maar de schone manier is om een ​​server-side redirect te hebben. Het nadeel van de server-side omleiding is dat het een extra HTTP-aanroep voor deze links veroorzaakt vanwege de 304-omleiding.
  2. Voegt extra <form> element toe
  3. De positionering van elementen bij het gebruik van meerdere formulieren kan lastig zijn en wordt nog erger bij responsieve ontwerpen. Een bepaalde lay-out kan met deze oplossing onmogelijk worden, afhankelijk van de volgorde van de elementen. Dit kan van invloed zijn op de bruikbaarheid als het ontwerp wordt beïnvloed door deze uitdaging.

Oplossing 2: JavaScript gebruiken.

U kunt JavaScript gebruiken om onclick en andere gebeurtenissen te activeren om het gedrag van een link met een knop na te bootsen. Het onderstaande voorbeeld kan worden verbeterd en uit de HTML worden verwijderd, maar het is er alleen om het idee te illustreren:

<button onclick="window.location.href='/page2'">Continue</button>

Pluspunten:

  1. Eenvoudig (voor basisvereiste) en semantisch behouden zonder dat er een extra formulier nodig is.
  2. Omdat het een echte knop is, zal het ook werken als een echte knop (bijv. versleepbaar gedrag en/of een klik nabootsen wanneer je op de spatiebalk drukt wanneer deze actief is).

Nadelen:

  1. Vereist JavaScript, wat betekent dat het minder toegankelijk is. Dit is niet ideaal voor een basis (kern)element zoals een link.

Oplossing 3: Anker (link) in de vorm van een knop.

Een link stylen als een knop is relatief eenvoudig en kan een vergelijkbare ervaring bieden in verschillende browsers. Bootstrap doet dit, maar het is ook gemakkelijk zelf te doen met eenvoudige stijlen.

Pluspunten:

  1. Eenvoudig (voor basisvereiste) en goede ondersteuning voor meerdere browsers.
  2. Heeft geen <form> nodig om te werken.
  3. Heeft geen JavaScript nodig om te werken.

Nadelen:

  1. Semantiek is een beetje kapot, omdat je een knop wilt die als een link werkt en niet een link die als een knop werkt.
  2. Het zal niet alle gedragingen van oplossing #1 reproduceren. Het ondersteunt niet hetzelfde gedrag als de knop. Links reageren bijvoorbeeld anders wanneer ze worden gesleept. Ook de "spatiebalk" link trigger werkt niet zonder wat extra JavaScript-code. Het zal veel complexiteit toevoegen omdat browsers niet consistent zijn over hoe ze keypress-gebeurtenissen op knoppen ondersteunen.

Conclusie

Oplossing #1 (Knop in een formulier) lijkt de meest transparante voor gebruikers met een minimum aan werk. Als uw lay-out niet wordt beïnvloed door deze keuze en de aanpassing aan de serverzijde haalbaar is, is dit een goede optie voor gevallen waarin toegankelijkheid de hoogste prioriteit heeft (bijvoorbeeld links op een foutpagina of foutmeldingen).

Als JavaScript geen belemmering vormt voor uw toegankelijkheidsvereisten, heeft oplossing #2 (JavaScript) de voorkeur boven #1 en #3.

Als toegankelijkheid om de een of andere reden van vitaal belang is (JavaScript is geen optie), maar u zich in een situatie bevindt waarin uw ontwerp en/of uw serverconfiguratie u verhindert om optie #1 te gebruiken, dan is oplossing #3 ( Anker in de vorm van een knop) is een goed alternatief om dit probleem op te lossen met een minimale impact op de bruikbaarheid.


Antwoord 10

Plaats uw knop gewoon in een referentietag, bijvoorbeeld

<a href="https://www.google.com/"><button>Next</button></a>

Dit lijkt perfect te werken voor mij en voegt geen %20 tags toe aan de link, precies zoals jij het wilt. Ik heb een link naar Google gebruikt om te demonstreren.

U kunt dit natuurlijk in een formuliertag plaatsen, maar dat is niet nodig.

Als je een ander lokaal bestand koppelt, plaats het dan gewoon in dezelfde map en voeg de bestandsnaam toe als referentie. Of geef de locatie van het bestand op als in niet in dezelfde map staat.

<a href="myOtherFile"><button>Next</button></a>

Dit voegt ook geen teken toe aan het einde van de URL, maar het heeft wel het bestandsprojectpad als de URL voordat het eindigt met de naam van het bestand. bijv.

Als mijn projectstructuur was…

.. geeft een map aan \

  • geeft een bestand aan
    terwijl vier | duiden een submap of bestand aan in de bovenliggende map

..openbaar
|||| ..html
|||| |||| -main.html
|||| |||| -secundair.html

Als ik bestand main.html open, zou de URL zijn:

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Als ik echter op de knop in main.html klik om te veranderen naar secondary.html, zou de URL zijn:

http://localhost:0000/public/html/secondary.html

Er zijn geen speciale tekens aan het einde van de URL.

Trouwens – (%20 geeft een spatie aan in een URL die het heeft gecodeerd en ingevoegd op de plaats ervan.)

Opmerking: de localhost:0000 zal uiteraard niet 0000 zijn. Je hebt daar je eigen poortnummer.

Bovendien wordt de ?_ijt=xxxxxxxxxxxxxxx aan het einde van de main.html URL, x bepaald door uw eigen verbinding, dus het zal duidelijk niet gelijk zijn aan de mijne.

Het lijkt misschien alsof ik een paar heel basale punten noem, maar ik wil het gewoon zo goed mogelijk uitleggen.


Antwoord 11

Je kunt eenvoudig een a-tag rond het element plaatsen:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


Antwoord 12

Als u wilt voorkomen dat u een formulier of invoer moet gebruiken en u op zoek bent naar een link die op een knop lijkt, kunt u mooie knoplinks maken met een div-wrapper, een anker en een h1-tag. U zou dit mogelijk willen, zodat u de link-knop vrijelijk rond uw pagina kunt plaatsen. Dit is vooral handig voor het horizontaal centreren van knoppen en het hebben van verticaal gecentreerde tekst erin. Hier is hoe:

Je knop bestaat uit drie geneste delen: een div-wrapper, een anker en een h1, zoals:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}
<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Antwoord 13

De enige manier om dit te doen (behalve BalusC’s ingenieuze vormidee!) is door een JavaScript onclick-gebeurtenis toe te voegen aan de knop, wat niet goed is voor de toegankelijkheid.

Heb je overwogen om een ​​normale link als een knop te stylen? Je kunt op die manier geen OS-specifieke knoppen bereiken, maar het is nog steeds de beste manier IMO.


Antwoord 14

Als je meegaat met wat een paar anderen hebben toegevoegd, kun je helemaal los gaan door gewoon een eenvoudige CSS-klasse te gebruiken zonder PHP, geen jQuery code, gewoon simpele HTML en CSS.

Maak een CSS-klasse en voeg deze toe aan uw anker. De code staat hieronder.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

Dat is het. Het is heel gemakkelijk om te doen en je kunt zo creatief zijn als je wilt. U bepaalt de kleuren, de grootte, de vormen (straal), enz. Voor meer details, zie de site waarop ik dit vond.


Antwoord 15

Naar Nicolas’ antwoord, het volgende werkte voor mij omdat dat antwoord geen type="button" had, waardoor het zich begon te gedragen als verzendtype… aangezien ik al één verzendtype heb . Het werkte niet voor mij … en nu kun je een klasse toevoegen aan de knop of aan <a> om de vereiste lay-out te krijgen:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

Antwoord 16

Een andere optie is om een ​​link in de knop te maken:

<button type="button"><a href="yourlink.com">Link link</a></button>

Gebruik vervolgens CSS om de link en knop op te maken, zodat de link de volledige ruimte binnen de knop in beslag neemt (zodat de gebruiker niet kan klikken):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

Ik heb hier een demo gemaakt.


Antwoord 17

Als je een knop wilt maken die overal voor een URL wordt gebruikt, maak dan een knopklasse voor een anker.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

Antwoord 18

Zeven manieren om dat te doen:

  1. Gebruik window.location.href = 'URL'
  2. Gebruik window.location.replace('URL')
  3. Gebruik window.location = 'URL'
  4. Gebruik window.open('URL')
  5. Gebruik window.location.assign('URL')
  6. Gebruik HTML formulier
  7. HTML anker-tag gebruiken
<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>
<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>
<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>
<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>
<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>
<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>
<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

Antwoord 19

Ik wist dat er veel antwoorden zijn ingediend, maar geen enkele leek het probleem echt op te lossen. Hier is mijn mening over een oplossing:

  1. Gebruik de <form method="get"> methode waarmee de OP begint. Dit werkt heel goed, maar het voegt soms een ? toe aan de URL. De ? is het grootste probleem.
  2. Deze oplossing werkt zonder JavaScript ingeschakeld. De fallback voegt echter een ? toe aan het einde van de URL.
  3. Als JavaScript is ingeschakeld, kunt u jQuery/JavaScript gebruiken om de link te volgen, zodat ? niet aan de URL wordt toegevoegd. Het zal naadloos terugvallen op de <form>-methode voor de zeer kleine fractie van gebruikers die geen JavaScript hebben ingeschakeld.
  4. De JavaScript-code maakt gebruik van gebeurtenisdelegatie, zodat u een gebeurtenislistener kunt toevoegen voordat de <form> of <button> zelfs maar bestaat. Ik gebruik jQuery in dit voorbeeld, omdat het snel en gemakkelijk is, maar het kan ook in ‘vanilla’ JavaScript.
  5. De JavaScript-code voorkomt dat de standaardactie plaatsvindt en volgt vervolgens de link in het <form> action-kenmerk.

JSBin-voorbeeld (codefragment kan geen links volgen)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();
    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>
    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>
</html>

Antwoord 20

Voor HTML 5 en een gestileerde knop samen met een afbeeldingsachtergrond

<a id="Navigate" href="http://www.google.com">
  <input
    type="button"
    id="NavigateButton"
    style="
      background-image: url(https://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color: #000;
      border-width: 3px;" title="Navigate"
    />
</a>

Antwoord 21

U kunt ook een knop gebruiken:

Bijvoorbeeld in ASP.NET Core-syntaxis:

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...
<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

Antwoord 22

Als u een SSL-certificaat gebruikt:

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

Antwoord 23

Ik heb dit gebruikt voor een website waar ik momenteel aan werk en het werkt geweldig!. Als je ook wat coole styling wilt, zal ik de CSS hier neerzetten.

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}
input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}
<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

Antwoord 24

U kunt ook de knoppen type-property instellen op "button" (het zorgt ervoor dat het formulier niet wordt verzonden), en nest het dan in een link (laat het de gebruiker omleiden).

Op deze manier zou u een andere knop in hetzelfde formulier kunnen hebben die het formulier verzendt, voor het geval dat nodig is. Ik denk ook dat dit in de meeste gevallen de voorkeur verdient boven het instellen van de formuliermethode en actie als een link (tenzij het een zoekformulier is, denk ik…)

Voorbeeld:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

Antwoord 25

Mensen die hebben geantwoord met behulp van <a></a>-kenmerken op een <button></button> waren behulpzaam.

Maar onlangs kwam ik een probleem tegen toen ik een link gebruikte in een <form></form>.

De knop wordt nu beschouwd als een verzendknop (HTML5). Ik heb geprobeerd een manier te vinden en heb deze methode gevonden.

Maak een CSS-stijlknop zoals hieronder:

.btn-style{
    border: solid 1px #0088cc;
    border-radius: 6px;
    moz-border-radius: 6px;
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
    font-size: 18px;
    color: #696869;
    padding: 1px 17px;
    background: #eeeeee;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(49%, #eeeeee), color-stop(72%, #cccccc), color-stop(100%, #eeeeee));
    background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background: linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0);
}

Of maak hier een nieuwe: CSS Button Generator

En maak vervolgens uw link met een class-tag genoemd naar de CSS-stijl die u heeft gemaakt:

<a href='link.php' class='btn-style'>Link</a>

Hier is een viool:

JSFiddle


Antwoord 26

Maak een knop met de tag <a> en de juiste css

.abutton { 
  background: #bada55; padding: 5px; border-radius: 5px; 
  transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2;  }
<a href="https://example.com" class="abutton">Continue</a>

Antwoord 27

In JavaScript

setLocation(base: string) {
  window.location.href = base;
}

In HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

Antwoord 28

U kunt JavaScript gebruiken:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>
</html>

Antwoord 29

Typ window.location en druk op Enter in uw browserconsole. Dan krijg je een duidelijk idee wat location inhoudt:

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

Je kunt hier elke waarde instellen.

Dus voor het omleiden van een andere pagina, kun je de href waarde instellen met je link.

   window.location.href = your link

In uw geval:

   <button onclick="window.location.href='www.google.com'">Google</button>

Antwoord 30

Als u een CSS-bibliotheek of een thema gebruikt, past u gewoon de klassen van een knop toe op de anker-/linktag.

Hieronder staat een voorbeeld met One ​​UI:

  <a class="btn-block-option" href="">
    <i class="si si-reload"></i>
  </a>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes