daball/dashersupply
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated button style on product pages.

Browse Source
This commit is contained in:
David Ball 2024-07-13 03:24:52 -04:00
parent 8f50e62c49
commit bfc50d8926
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/[productLookup].astro
View File

@ -73,7 +73,9 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
{product?.amazonProductDetails?.description && product?.amazonProductDetails?.description} {product?.amazonProductDetails?.description && product?.amazonProductDetails?.description}
</p> </p>
} }
<a href={product?.amazonLink} class="btn btn-primary">{formatAsCurrency(product?.amazonProductDetails?.price||0)} On Amazon <span>&rarr;</span></a> <div class="navbar">
<span class="custom-btn-container"><a href={product?.amazonLink}>{formatAsCurrency(product?.amazonProductDetails?.price||0)} On Amazon <span>&rarr;</span></a></span>
</div>
</div> </div>
</div> </div>
<br /> <br />
@ -162,4 +164,32 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
font-weight: 600; font-weight: 600;
font-size: 12pt; font-size: 12pt;
} }
.custom-btn-container {
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 8px;
background-position: 100%;
padding: 1px;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
text-align: center;
display: flex;
align-items: center;
}
.custom-btn-container > a {
width: 100%;
border-radius: 8px;
text-decoration: none;
line-height: 1.4;
/* padding: calc(0.5rem - 1px); */
color: white;
padding: 1rem;
background-color: #23262d;
opacity: 0.8;
}
.custom-btn-container:is(:hover, :focus-within) {
background-position: 0;
background-image: var(--accent-gradient);
}
</style> </style>