School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Welcome to Dream.In.Code
Become an Expert!

Join 307,136 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,999 people online right now. Registration is fast and FREE... Join Now!




CSS Button Coloring Trouble

 

CSS Button Coloring Trouble, Class of button1 created!!!!

JesusLover05

23 Oct, 2009 - 02:15 PM
Post #1

New D.I.C Head
*

Joined: 10 Oct, 2009
Posts: 13

To Whom It May Concern,

I am creating a class called button1 for my web project since someone informed me that I created too many class buttons and I only needed one. I am having trouble though with the coloring. I want to be able to establish one button on the pages I visit to be blue and not all 4 buttons to be blue. I also want the rest of buttons I have not clicked on to visit the page to be green. This is what I am having trouble on. I would really appreciate it if anybodu can help me.


Here is my button code:

CODE
.button1  {

  border-top: 1px inset #FFFFFF;
  border-bottom:  1px inset #FFFFFF;
  border-right: 3px outset #336600;
  border-left: 3px outset #669966;
  width: 75px;
  padding:  4px 10px 4px 10px;
  color:  #ffffff;
  background-color:  #336600;
  font-family:  Arial, Helvetica, sans-serif;
  font-size:  16px;
  font-weight:  bold;
  text-align:  center;
  text-decoration:  none;
  display: block;
}
a.button1:link  {     background-color : #003366;
                              color :  #ffffff;
}
a.button1:visited  {  background-color : #336600;
                                color :  #ffffff;
}
a.button1:hover  { color :  #669966;
                              border : 3px outset #336600;
}


I would really appreciate it if any of you can help. Thank you.

This post has been edited by JesusLover05: 23 Oct, 2009 - 02:18 PM

User is offlineProfile CardPM
+Quote Post


bammurdo

RE: CSS Button Coloring Trouble

25 Oct, 2009 - 01:05 PM
Post #2

New D.I.C Head
Group Icon

Joined: 3 Oct, 2009
Posts: 40



Thanked: 1 times
Dream Kudos: 50
My Contributions
Hey smile.gif

First off :

Here is my button codeCSS file:
smile.gif

ok, so you'r no the right lines using the ":link" ":hover" ":active" and ":visited".

Next you do this :
CODE

<div id"NavBar(or w/e your containing them in)">
<!--button number 1 -->
<a class="button1" href="Location.html" /> This Is button number 1 </a>
<!--button number 2 -->
<a class="button1" href="Location2.html" /> This Is button number 2 </a>
<!--button number 3 -->
<a class="button1" href="Location3.html" /> This Is button number 3 </a>
<!--button number 4 -->
<a class="button1" href="Location4.html" /> This Is button number 4 </a>
</div>

smile.gif

biggrin.gif
Hopefully that helps you out smile.gif, tell me if not biggrin.gif
bam smile.gif

This post has been edited by bammurdo: 25 Oct, 2009 - 01:07 PM
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/21/09 02:51PM

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month