fix: CTA button styling
This commit is contained in:
parent
64b8426d95
commit
37e7efd8d7
@ -36,31 +36,43 @@ body {
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* casual button */
|
||||
.ext-btn {
|
||||
@apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-95 transition-transform font-semibold no-underline;
|
||||
@apply py-2 px-4 rounded-full hover:opacity-95 hover:scale-105 transition-all font-medium no-underline duration-300;
|
||||
}
|
||||
.ext-btn-primary {
|
||||
@apply bg-extColorPrimary text-white;
|
||||
@apply ext-btn bg-extColorPrimary text-white hover:text-extColorPrimary3;
|
||||
}
|
||||
.ext-btn-primary2 {
|
||||
@apply bg-extColorPrimary2 text-white;
|
||||
@apply ext-btn bg-extColorPrimary2 text-white hover:text-extColorPrimary3;
|
||||
}
|
||||
.ext-btn-primary3 {
|
||||
@apply bg-extColorPrimary3 text-white;
|
||||
@apply ext-btn bg-extColorPrimary3 text-white hover:text-extColorPrimary3;
|
||||
}
|
||||
.ext-btn-primary4 {
|
||||
@apply bg-extColorPrimary4 text-white;
|
||||
@apply ext-btn bg-extColorPrimary4 text-white hover:text-extColorPrimary3;
|
||||
}
|
||||
|
||||
.ext-btn-shadow-sm {
|
||||
@apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)];
|
||||
/* CTA button */
|
||||
.ext-btn-cta {
|
||||
@apply inline-block !text-[16px] font-medium bg-extColorPrimary6 hover:bg-extColorPrimary8 !text-white py-1 px-6 hover:scale-105 rounded-full text-lg shadow-sm transition-all duration-300;
|
||||
}
|
||||
.ext-btn-shadow-sm-primary4 {
|
||||
@apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
|
||||
.ext-btn-cta * {
|
||||
@apply !inline-block;
|
||||
}
|
||||
.ext-btn-cta-md {
|
||||
@apply ext-btn-cta !text-lg py-4 px-8;
|
||||
}
|
||||
|
||||
.ext-btn-shadow-sm-primary8 {
|
||||
@apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
|
||||
/* button with shadow */
|
||||
.ext-btn-shadow {
|
||||
@apply py-2 px-3 rounded-full text-sm font-medium no-underline shadow-[0px_0px_10px_0px_rgba(0,0,0,0.5)] transition-colors duration-300;
|
||||
}
|
||||
.ext-btn-shadow-primary4 {
|
||||
@apply ext-btn-shadow bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6;
|
||||
}
|
||||
.ext-btn-shadow-primary8 {
|
||||
@apply ext-btn-shadow bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6;
|
||||
}
|
||||
|
||||
.shadow-nav {
|
||||
|
@ -1,4 +1,5 @@
|
||||
import Link from "next/link";
|
||||
import { FaArrowRight } from "react-icons/fa";
|
||||
|
||||
export interface BeforeFooterBlockProps {
|
||||
id?: string;
|
||||
@ -50,11 +51,8 @@ export function BeforeFooterBlock({ title, description, buttonText, showLinier =
|
||||
<h4 className="text-4xl font-medium mb-3">{title ?? placeholderTitle}</h4>
|
||||
<span className="text-lg leading-relaxed mb-6">{description ?? placeholderDescription}</span>
|
||||
<div className="pt-5">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-block bg-extColorPrimary6 hover:bg-extColorPrimary8 text-white py-3 px-6 hover:scale-105 rounded-full text-lg shadow-sm transition-all duration-500"
|
||||
>
|
||||
{buttonText ?? placeholderButtonText} →
|
||||
<Link href="/contact" className="ext-btn-cta-md">
|
||||
{buttonText ?? placeholderButtonText} <FaArrowRight />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -11,7 +11,7 @@ export default function BoxMenu({ title, description, href }: BoxMenuProps) {
|
||||
<div className="flex flex-col bg-extColorPrimary4 text-white rounded-md items-center px-4 py-4">
|
||||
<span className="font-semibold text-2xl">{title ?? ""}</span>
|
||||
<div className="text-center font-medium mt-4">{description ?? ""}</div>
|
||||
<Link href={fixedHref(href)} className="ext-btn ext-btn-primary mt-4">
|
||||
<Link href={fixedHref(href)} className="ext-btn-primary mt-4">
|
||||
Learn More
|
||||
</Link>
|
||||
</div>
|
||||
|
@ -31,7 +31,7 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
|
||||
<a href={`/${data.slug}/`}>{data.title}</a>
|
||||
</h2>
|
||||
<div className="flex justify-center mt-2">
|
||||
<a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary8">
|
||||
<a href={`/${data.slug}/`} className="ext-btn-shadow-primary8">
|
||||
Continue Reading
|
||||
</a>
|
||||
</div>
|
||||
|
@ -75,10 +75,7 @@ export default function Header({ links }: { links: typeof navMenuData }) {
|
||||
<li>
|
||||
<div className="flex flex-col items-center h-full w-full content-center justify-center gap-2">
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
href="/contact"
|
||||
className="bg-extColorPrimary6 hover:bg-extColorPrimary8 px-4 py-2 rounded-full text-white font-semibold hover:cursor-pointer hover:scale-[1.15] mt-3 lg:mt-0 transition-all duration-300"
|
||||
>
|
||||
<a href="/contact" className="ext-btn-cta">
|
||||
REQUEST CONSULTATION
|
||||
</a>
|
||||
</div>
|
||||
|
@ -22,12 +22,7 @@ export default function Hero() {
|
||||
<h2 className="hs-title-3">Healing Begins Here</h2>
|
||||
<h1 className="text-3xl md:text-6xl">Cochise Oncology</h1>
|
||||
<p className="text-xl">Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
|
||||
<a
|
||||
href="/contact"
|
||||
// className="btn btn-mod btn-border-w btn-large btn-round align-middle w-full md:w-1/2 lg:w-1/4 hover:opacity-[0.5]"
|
||||
className="inline-block bg-extColorPrimary6 hover:bg-extColorPrimary8 text-white py-1 px-6 hover:scale-105 rounded-full text-lg shadow-lg transition-all duration-500"
|
||||
data-btn-animate="y"
|
||||
>
|
||||
<a href="/contact" className="ext-btn-cta-md" data-btn-animate="y">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user