CTA-länkar showcase

Hovra och tab:a igenom varje länk i default / loading / disabled för att verifiera vinröd hover, focus-ring och active-press även när länken inte är klickbar.

Ljust läge

CTAButtons / Index / Offert / Tack / OmOss

Primär CTA-länk (rounded-full)

Huvud-CTA i Hero, Offert-sidan, Tack-sidan, OmOss och Kontakta oss-länken i Navbar.

DefaultFå kostnadsfri offertHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledFå kostnadsfri offertaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

Tack.tsx

Primär CTA-länk (rounded-xl)

Telefon-/snabbåtgärd i Tack-sidans åtgärdslista.

DefaultRing 070-764 11 91Hovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledRing 070-764 11 91aria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

Tack.tsx

Outline CTA-länk (border-wine)

Sekundär åtgärd intill primär CTA på Tack-sidan.

DefaultTillbaka till startsidanHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledTillbaka till startsidanaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

OmOss.tsx

Outline CTA-länk (border-border, hover-wine)

Sekundär åtgärd som lyser upp i vinröd vid hover.

DefaultLadda ner referenserHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledLadda ner referenseraria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

Offert.tsx

Subtil cream-knapp (offert-sektion)

Returknapp i Offert-formulärets summering.

DefaultÄndra svarHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledÄndra svararia-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

CTAButtons.tsx

Sekundär CTA, Ring direkt

Telefonlänk bredvid primär CTA i CTAButtons.

DefaultRing direktHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledRing direktaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

ReferenseDetalj.tsx

Referenser, primär CTA på mörk bild

Visa-projektet-knapp i ReferensDetalj-hjälte.

DefaultSe hela projektetHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledSe hela projektetaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

ReferenseDetalj.tsx

Referenser, outline CTA på mörk bild

Sekundär outline-länk bredvid primär CTA i hjälten.

DefaultBoka platsbesökHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledBoka platsbesökaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

Mörkt läge

CTAButtons / Index / Offert / Tack / OmOss

Primär CTA-länk (rounded-full)

Huvud-CTA i Hero, Offert-sidan, Tack-sidan, OmOss och Kontakta oss-länken i Navbar.

DefaultFå kostnadsfri offertHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledFå kostnadsfri offertaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

Tack.tsx

Primär CTA-länk (rounded-xl)

Telefon-/snabbåtgärd i Tack-sidans åtgärdslista.

DefaultRing 070-764 11 91Hovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledRing 070-764 11 91aria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

Tack.tsx

Outline CTA-länk (border-wine)

Sekundär åtgärd intill primär CTA på Tack-sidan.

DefaultTillbaka till startsidanHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledTillbaka till startsidanaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

OmOss.tsx

Outline CTA-länk (border-border, hover-wine)

Sekundär åtgärd som lyser upp i vinröd vid hover.

DefaultLadda ner referenserHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledLadda ner referenseraria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

Offert.tsx

Subtil cream-knapp (offert-sektion)

Returknapp i Offert-formulärets summering.

DefaultÄndra svarHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledÄndra svararia-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

CTAButtons.tsx

Sekundär CTA, Ring direkt

Telefonlänk bredvid primär CTA i CTAButtons.

DefaultRing direktHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledRing direktaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

ReferenseDetalj.tsx

Referenser, primär CTA på mörk bild

Visa-projektet-knapp i ReferensDetalj-hjälte.

DefaultSe hela projektetHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledSe hela projektetaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

ReferenseDetalj.tsx

Referenser, outline CTA på mörk bild

Sekundär outline-länk bredvid primär CTA i hjälten.

DefaultBoka platsbesökHovra & tab:a, vinröd hover + focus-ring.

LoadingSpinner + aria-busy. Klick blockeras.

DisabledBoka platsbesökaria-disabled + opacity 50 %. Hover/click off, focus-ring kvar.

Ljust läge

Primär CTA-länk (rounded-full)

Primär CTA-länk (rounded-xl)

Outline CTA-länk (border-wine)

Outline CTA-länk (border-border, hover-wine)

Subtil cream-knapp (offert-sektion)

Sekundär CTA, Ring direkt

Referenser, primär CTA på mörk bild

Referenser, outline CTA på mörk bild

Mörkt läge

Primär CTA-länk (rounded-full)

Primär CTA-länk (rounded-xl)

Outline CTA-länk (border-wine)

Outline CTA-länk (border-border, hover-wine)

Subtil cream-knapp (offert-sektion)

Sekundär CTA, Ring direkt

Referenser, primär CTA på mörk bild

Referenser, outline CTA på mörk bild

BeforeAfterSlider