Quantcast

Using CSS to style a back button

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Using CSS to style a back button

Rod Castello-2
Hi,
I'm using this code to generate a button that takes my users to the page
the just came from.
<input type="button" value="Back to Product" onclick="history.back(-1)"/>

It works fine, but I would like to style it and set the cursor to "hand".
I'm trying to find out how to add a class or id to it, but haven't been
able to find anything online as of yet.

The other way I could do it is create the button with HTML and CSS but then
I don't know how to add the javascript functionality to it.

Would love a little coaching on this.
Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL
INFORMATION"
http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
The back button is here:
http://www.lotuspetfoods.com/canned-pates-nutrient-table/

Ideally I'd like the Nutritional Information to be on a pop up like what
happens when you click on the button called "GLOSSARY". I haven't been able
to figure that one out yet.

Thanks in advance for any help.

--
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
818.437.7880
[hidden email]
www.smashcube.com
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using CSS to style a back button

Marie-Ange Demeulemeester
Hi Rod,

Use cursor:pointer;

Instead of "<input type=button", you can use "<button
onClick="history.back(-1)">Back to Product</button>" = html5

Regards,

Marie

2017-02-23 23:48 GMT+01:00 Rod Castello <[hidden email]>:

> Hi,
> I'm using this code to generate a button that takes my users to the page
> the just came from.
> <input type="button" value="Back to Product" onclick="history.back(-1)"/>
>
> It works fine, but I would like to style it and set the cursor to "hand".
> I'm trying to find out how to add a class or id to it, but haven't been
> able to find anything online as of yet.
>
> The other way I could do it is create the button with HTML and CSS but then
> I don't know how to add the javascript functionality to it.
>
> Would love a little coaching on this.
> Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL
> INFORMATION"
> http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
> The back button is here:
> http://www.lotuspetfoods.com/canned-pates-nutrient-table/
>
> Ideally I'd like the Nutritional Information to be on a pop up like what
> happens when you click on the button called "GLOSSARY". I haven't been able
> to figure that one out yet.
>
> Thanks in advance for any help.
>
> --
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880
> [hidden email]
> www.smashcube.com
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




--
Groetjes,
Marie
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using CSS to style a back button

Mi B
In reply to this post by Rod Castello-2

> 23 feb. 2017 kl. 23:48 skrev Rod Castello <[hidden email]>:
>
> Hi,
> I'm using this code to generate a button that takes my users to the page
> the just came from.
> <input type="button" value="Back to Product" onclick="history.back(-1)”/>

Why would you need this javascript? Why not use the actual product link?

>
> It works fine, but I would like to style it and set the cursor to "hand".
> I'm trying to find out how to add a class or id to it, but haven't been
> able to find anything online as of yet.
>
> The other way I could do it is create the button with HTML and CSS but then
> I don't know how to add the javascript functionality to it.
>
> Would love a little coaching on this.
> Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL
> INFORMATION"
> http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
> The back button is here:
> http://www.lotuspetfoods.com/canned-pates-nutrient-table/
>
> Ideally I'd like the Nutritional Information to be on a pop up like what
> happens when you click on the button called "GLOSSARY". I haven't been able
> to figure that one out yet.
>
> Thanks in advance for any help.
>
> --
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880
> [hidden email]
> www.smashcube.com
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using CSS to style a back button

Rod Castello-2
I needed a quick easy to find back button because they get to the
nutritional page from many different products, so from a user point of view
this made sense.
1. Click the Nutrition Info Bar
2. Go to Nutrition page
3. Click "BACK" to go back to the page they were on, which could be one of
6 different products.


On Thu, Feb 23, 2017 at 4:11 PM, Mi B <[hidden email]> wrote:

>
> > 23 feb. 2017 kl. 23:48 skrev Rod Castello <[hidden email]>:
> >
> > Hi,
> > I'm using this code to generate a button that takes my users to the page
> > the just came from.
> > <input type="button" value="Back to Product" onclick="history.back(-1)”/>
>
> Why would you need this javascript? Why not use the actual product link?
>
> >
> > It works fine, but I would like to style it and set the cursor to "hand".
> > I'm trying to find out how to add a class or id to it, but haven't been
> > able to find anything online as of yet.
> >
> > The other way I could do it is create the button with HTML and CSS but
> then
> > I don't know how to add the javascript functionality to it.
> >
> > Would love a little coaching on this.
> > Here's the pages involved. Click where it says "CLICK HERE FOR
> NUTRITIONAL
> > INFORMATION"
> > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
> > The back button is here:
> > http://www.lotuspetfoods.com/canned-pates-nutrient-table/
> >
> > Ideally I'd like the Nutritional Information to be on a pop up like what
> > happens when you click on the button called "GLOSSARY". I haven't been
> able
> > to figure that one out yet.
> >
> > Thanks in advance for any help.
> >
> > --
> > Rod Castello
> > DIGITAL DESIGN AND DEVELOPMENT
> > 818.437.7880
> > [hidden email]
> > www.smashcube.com
> > ______________________________________________________________________
> > css-discuss [[hidden email]]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



--
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
818.437.7880
[hidden email]
www.smashcube.com
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using CSS to style a back button

Rod Castello-2
In reply to this post by Rod Castello-2
Thank you Marie, I will try this out.

On Thu, Feb 23, 2017 at 3:56 PM, <[hidden email]> wrote:

> Hi Rod,
>
> Use cursor:pointer;
> Instead of "<input type=button", you can use "<button
> onClick="history.back(-1)">Back to Product</button>" = html5
>
> Regards,
>
> Marie
>
> -----Original Message-----
> From: css-d [mailto:[hidden email]] On Behalf Of Rod
> Castello
> Sent: donderdag 23 februari 2017 23:49
> To: [hidden email]
> Subject: [css-d] Using CSS to style a back button
>
> Hi,
> I'm using this code to generate a button that takes my users to the page
> the just came from.
> <input type="button" value="Back to Product" onclick="history.back(-1)"/>
>
> It works fine, but I would like to style it and set the cursor to "hand".
> I'm trying to find out how to add a class or id to it, but haven't been
> able to find anything online as of yet.
>
> The other way I could do it is create the button with HTML and CSS but
> then I don't know how to add the javascript functionality to it.
>
> Would love a little coaching on this.
> Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL
> INFORMATION"
> http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
> The back button is here:
> http://www.lotuspetfoods.com/canned-pates-nutrient-table/
>
> Ideally I'd like the Nutritional Information to be on a pop up like what
> happens when you click on the button called "GLOSSARY". I haven't been able
> to figure that one out yet.
>
> Thanks in advance for any help.
>
> --
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880
> [hidden email]
> www.smashcube.com
> ______________________________________________________________________
> css-discuss [[hidden email]] http://www.css-discuss.org/
> mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>


--
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
818.437.7880
[hidden email]
www.smashcube.com
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using CSS to style a back button

Tom Livingston
Would the browser back button not be suffice?



On Thu, Feb 23, 2017 at 7:27 PM Rod Castello <[hidden email]> wrote:

> Thank you Marie, I will try this out.
>
> On Thu, Feb 23, 2017 at 3:56 PM, <[hidden email]> wrote:
>
> > Hi Rod,
> >
> > Use cursor:pointer;
> > Instead of "<input type=button", you can use "<button
> > onClick="history.back(-1)">Back to Product</button>" = html5
> >
> > Regards,
> >
> > Marie
> >
> > -----Original Message-----
> > From: css-d [mailto:[hidden email]] On Behalf Of
> Rod
> > Castello
> > Sent: donderdag 23 februari 2017 23:49
> > To: [hidden email]
> > Subject: [css-d] Using CSS to style a back button
> >
> > Hi,
> > I'm using this code to generate a button that takes my users to the page
> > the just came from.
> > <input type="button" value="Back to Product" onclick="history.back(-1)"/>
> >
> > It works fine, but I would like to style it and set the cursor to "hand".
> > I'm trying to find out how to add a class or id to it, but haven't been
> > able to find anything online as of yet.
> >
> > The other way I could do it is create the button with HTML and CSS but
> > then I don't know how to add the javascript functionality to it.
> >
> > Would love a little coaching on this.
> > Here's the pages involved. Click where it says "CLICK HERE FOR
> NUTRITIONAL
> > INFORMATION"
> > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
> > The back button is here:
> > http://www.lotuspetfoods.com/canned-pates-nutrient-table/
> >
> > Ideally I'd like the Nutritional Information to be on a pop up like what
> > happens when you click on the button called "GLOSSARY". I haven't been
> able
> > to figure that one out yet.
> >
> > Thanks in advance for any help.
> >
> > --
> > Rod Castello
> > DIGITAL DESIGN AND DEVELOPMENT
> > 818.437.7880
> > [hidden email]
> > www.smashcube.com
> > ______________________________________________________________________
> > css-discuss [[hidden email]] http://www.css-discuss.org/
> > mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> > http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
> >
>
>
> --
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880
> [hidden email]
> www.smashcube.com
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Using CSS to style a back button

Rod Castello-2
The browser back button works, but it's not what I want from a UX
standpoint. I want to direct or guide their flow and keep the cursor in the
center of the page for ease of use.

On Thu, Feb 23, 2017 at 4:58 PM, Tom Livingston <[hidden email]> wrote:

> Would the browser back button not be suffice?
>
>
>
> On Thu, Feb 23, 2017 at 7:27 PM Rod Castello <[hidden email]>
> wrote:
>
> > Thank you Marie, I will try this out.
> >
> > On Thu, Feb 23, 2017 at 3:56 PM, <[hidden email]> wrote:
> >
> > > Hi Rod,
> > >
> > > Use cursor:pointer;
> > > Instead of "<input type=button", you can use "<button
> > > onClick="history.back(-1)">Back to Product</button>" = html5
> > >
> > > Regards,
> > >
> > > Marie
> > >
> > > -----Original Message-----
> > > From: css-d [mailto:[hidden email]] On Behalf Of
> > Rod
> > > Castello
> > > Sent: donderdag 23 februari 2017 23:49
> > > To: [hidden email]
> > > Subject: [css-d] Using CSS to style a back button
> > >
> > > Hi,
> > > I'm using this code to generate a button that takes my users to the
> page
> > > the just came from.
> > > <input type="button" value="Back to Product"
> onclick="history.back(-1)"/>
> > >
> > > It works fine, but I would like to style it and set the cursor to
> "hand".
> > > I'm trying to find out how to add a class or id to it, but haven't been
> > > able to find anything online as of yet.
> > >
> > > The other way I could do it is create the button with HTML and CSS but
> > > then I don't know how to add the javascript functionality to it.
> > >
> > > Would love a little coaching on this.
> > > Here's the pages involved. Click where it says "CLICK HERE FOR
> > NUTRITIONAL
> > > INFORMATION"
> > > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
> > > The back button is here:
> > > http://www.lotuspetfoods.com/canned-pates-nutrient-table/
> > >
> > > Ideally I'd like the Nutritional Information to be on a pop up like
> what
> > > happens when you click on the button called "GLOSSARY". I haven't been
> > able
> > > to figure that one out yet.
> > >
> > > Thanks in advance for any help.
> > >
> > > --
> > > Rod Castello
> > > DIGITAL DESIGN AND DEVELOPMENT
> > > 818.437.7880
> > > [hidden email]
> > > www.smashcube.com
> > > ______________________________________________________________________
> > > css-discuss [[hidden email]] http://www.css-discuss.org/
> > > mailman/listinfo/css-d
> > > List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> > > http://css-discuss.org/policies.html
> > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> > >
> > >
> >
> >
> > --
> > Rod Castello
> > DIGITAL DESIGN AND DEVELOPMENT
> > 818.437.7880
> > [hidden email]
> > www.smashcube.com
> > ______________________________________________________________________
> > css-discuss [[hidden email]]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



--
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
818.437.7880
[hidden email]
www.smashcube.com
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Loading...