Forum Mjukvara Programmering och digitalt skapande Tråd

HTML/CSS Ändra button till en pil eller göra en pil klickbar?

1
Skriv svar
Permalänk
Medlem
●

HTML/CSS Ändra button till en pil eller göra en pil klickbar?

Hej, sjukt trivial fråga men hittar verkligen ingenting som förklarar det här

Jag har en helt vanlig knapp som anropar en funktion(goBack) när man klickar på den

<button (click)='goBack()'>Tillbaka</i></button>

Jag vill att knappen ska se ut som en pil i det här exemplet(den röda pilen t.ex):
https://www.w3schools.com/icons/tryit.asp?filename=tryicons_f...

Går det ?

Alternativt, kan jag göra pilen klickbar?

<i class="fa fa-arrow-left" style="font-size:48px;color:red"></i>

Det jag experimenterat med är sofar:
I html

<button id="backButton" (click)='goBack()'><i class="fa fa-arrow-left" style="font-size:40px; color:#7AB800"></i></button>

CSS för knappen:(Jag sätter knappens bakgrund till helvit så det ser ut som att det är en ensam pil bara)

#backButton {
    background-color: rgb(255, 255, 255);
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1px;
  }

Det här är jag nästan nöjd med, men jag vill att när man hoovrar över pilen med musen så ska pilen ändra färg, nu kan jag bara göra det på hela knappen och inte bara pilen.

#backButton:hover{
    background-color:khaki;
  }

Några förslag? Det här kändes som något man kan göra på 30 sek men det var ju svårare än jag trodde :/

Så frågorna är:
1.Kan jag ändra en standard <button> så den ser ut som en pil?(inte en pil inuti en button, en ensam pil bara)
ELLER
2.Kan jag koppla min funktion till pilen och göra den klickbar samt hover-bar?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det ser ut som att du kör med Fontawesome-ikoner.
Då borde något i stil med detta fungera för att byta färg på ikonen vid hover

#backButton:hover i {
    color: khaki;  
}

Skulle rekommendera att inte koppla klickevent på annat än länkar och knappar för att sidan fortfarande ska kunna användas med enbart tangentbordet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Bosnic:

Det ser ut som att du kör med Fontawesome-ikoner.
Då borde något i stil med detta fungera för att byta färg på ikonen vid hover

#backButton:hover i {
    color: khaki;  
}

Skulle rekommendera att inte koppla klickevent på annat än länkar och knappar för att sidan fortfarande ska kunna användas med enbart tangentbordet

Gå till inlägget

Det där funkar vid hoover men det blir ju på hela <button> eftersom ikonen(pilen) just nu är inuti en <button>, jag vill antingen ha en ensam pil som inte är inuti en button(men som fortfarande fungerar precis som en button med click event). Eller rentav ändra hela utseendet på en <button> till en pil.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Wequ:

Det där funkar vid hoover men det blir ju på hela <button> eftersom ikonen(pilen) just nu är inuti en <button>, jag vill antingen ha en ensam pil som inte är inuti en button(men som fortfarande fungerar precis som en button med click event). Eller rentav ändra hela utseendet på en <button> till en pil.

Gå till inlägget

Mitt kodexempel targetar enbart ikonen när du har en hover på knappen. Om knappen byter utseende så är det troligtvis pga knappens standardstyling som du i så fall får styla bort.

Ska du använda detta på en site eller app som enbart du kommer använda så är det väl helt fine att koppla klickeventet på ikonen. Men om du planerar att släppa detta som en publik site så skulle jag behållit knappen och försökt styla bort standardbeteendet på hover för att tabb med tangentbord fortfarande ska fungera.

Om nu knappen ska ta dig till en annan sida så kanske en länk är ett bättre alternativ

<button id="backButton"><i class="fa fa-arrow-left"></i></button>

#backButton {
    background: none;
    border: none;
}

#backButton:hover i {
    color: khaki;  
}

Sen är jag väl lite arbetsskadad och skulle även säga att en "tillbaka" knapp är något som oftast är helt onödigt när i stort sätt alla moderna webbläsare och mobila enheter har en inbyggd tillbakaknapp.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

-----
Edit:
Såg inte först att det hjälde en unicodebaserad pil och inte en bild. Men låter det stå kvar i alla fall...
-----

Följande borde funka.

Sätt en storlek på diven.
Sätt img och button till 100% height och width.
Sätt bakgrundsfärgen på button till att vara helt genomskinlig. "#ffffffff".

<div>
  <img src="backArrow.jpg">
  <button></button>
</div>

Annars funkar ju även detta om du inte måste använda button. Men beorende på vad du gör så är nog inte detta semantiskt korrekt. (Edit: Vad Bosnic skrev )

<a>
  <img src="backArrow.jpg">
</a>
Senast redigerat
Visa signatur

www.fckdrm.com - DRM år 2025? Ha pyttsan.

Redigera
Citera flera Citera
1
Skriv svar