(resolved) Style a link to look like a button

Highlighted
Shopify Partner
695 0 15

http://www.rachellucie.co.uk/cart

So simple it's ridiculous, but alas beyond me.

I would like to pay someone to code my 'continue shopping' link on my cart to look identical to my 'update cart' and 'checkout' buttons. 

I have been on sites and created the code etc for a button that looks identical, but crashed and burned because it's really a link, not a submit button.

It currently works ok, taking you back to the previous product, but looks wrong.

Thanks in advance

Rachel

 

jewellery designer-maker & nature inspired photographer | West Yorkshire, UK
0 Likes
Highlighted
Shopify Expert
261 0 9

hey rachel.

If you add

 

div.cart-options a {
    background: #028482;
    border: 0px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0px;
    padding: 5px;
    text-decoration: none;
}

div.cart-options a:hover {
    background: #7aba7a;
}

to your stylesheet.css it should give you what you are trying to do.

m

 

meeech | http://www.twitter.com/meeech | http://mitchell.amihod.com
0 Likes
Highlighted
Shopify Partner
695 0 15

nice one, meeech, was expecting to pay! thank you :)

however it didn't work, so what have I done wrong?! :/

I added that code to the bottom of my style sheet

I checked cart.liquid and div.cart-options is there, so figure it should just pull through that styling?

here's the code from my cart.liquid:

 

<div class="cart-options">
		<h3><strong>Subtotal {{ cart.total_price | money }}</strong></h3>
<a href="/" title="Click here to go back" onclick="history.back(); return false">Continue Shopping</a>
<input type="submit" id="update-cart" name="update" value="Update Cart" />
		<input type="submit" name="checkout" value="Checkout" />
</div>

cheers 

 

 

jewellery designer-maker & nature inspired photographer | West Yorkshire, UK
0 Likes
Highlighted
New Member
1 0 0

i think in your  cart page you can use the following code

<a id="Continue-Shopping" onclick="history.back(); return false" title="Click here to go back" href="/">Continue Shopping</a>

 

and in your stylesheet.css use the following code

#Continue-Shopping{
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #028482;
color:#FFFFFF;
display:inline-block;
font-size:13px;
padding:5px;
text-decoration:none;
}
#Continue-Shopping:hover{
background: #7aba7a;
}

0 Likes
Highlighted
Shopify Partner
695 0 15

thanks marco.

Still didn't work!

replaced the code in the cart.liquid (below)

 

<div class="cart-options">
		<h3><strong>Subtotal {{ cart.total_price | money }}</strong></h3>
<a id="Continue-Shopping" onclick="history.back(); return false" title="Click here to go back" href="/">Continue Shopping</a>

<input type="submit" id="update-cart" name="update" value="Update Cart" />
		<input type="submit" name="checkout" value="Checkout" />
</div>

added your code at bottom of style sheet. (commented out the other)

Is it anything to do with the order and the <div> 's that are in there?

 

jewellery designer-maker & nature inspired photographer | West Yorkshire, UK
0 Likes
Highlighted
Shopify Expert
261 0 9

hey rachel, 

what i posted should work. 

the problem you are having with my changes, (and marcopolo's) is you have bad css in your stylesheet.css

Near the end  you have

 

div.box{

border: 1px solid #F2F0F0;
background: #F2F0F0;
padding: 10px;

notice: you don't close the style.

add a } after the padding:10px; and it should work

m

 

 

meeech | http://www.twitter.com/meeech | http://mitchell.amihod.com
0 Likes
Highlighted
Shopify Partner
695 0 15

Meeech, thank you SO much!

that also explains why any bits of code I've added to my style sheet after that div one haven't worked, mystery (and bad code) solved.

check out my lovely new button :)

http://www.rachellucie.co.uk/cart

 

jewellery designer-maker & nature inspired photographer | West Yorkshire, UK
0 Likes