2 replies [Last post]
technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 3 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

I have assembled some code that creates buttons dynamically without the use of images:

<style type="text/css">
a.button {
  font: normal 8pt Arial, Helvetica, sans-serif;
  color: #036;
  text-decoration: none;
  background-color: #CCD6E0;
  border: solid 1px #036;
  border-top-color: #AAB;
  border-left-color: #AAB;
  float: left;
  text-align: center;
  padding: 3px 8px;
  margin-right: 8px;
}

a.button:link {
  text-decoration: none;
}

a.button:visited {
  color: #036;
}

a.button:hover {
  display: block;
  color: #346;
  background-color: #BCC6D0;
  border: solid 1px #369;
  border-bottom-color: #779;
  border-right-color: #779;
}
</style>

<a href="#" class="button">Submit</a>
<a href="#" class="button">Reset</a>

A minor disadvantage that I see with this approach is that when selecting the entire page, also the button text is selected.
Unless anyone knows of a more compelling reason not to use text on buttons?

A more disconcerting problem is that the hover styling makes the button look clicked already, whereas it is really a mouseOver.
So my other question is, whether some sample styles exist that roughly emulates the above of which the HTML looks like this:

<a href="#" onMouseup="style1" onMousedown="style2" onMouseover="style3">Submit</a>
<a href="#" onMouseup="style1" onMousedown="style2" onMouseover="style3">Reset</a>

In other words, can I use styling code in my events?

Thanks in advance.

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Creating dynamic buttons

Hi technossomy,
You can use :active instead of onclick which will change the style when the user hold the mouse button down.

Hope that helps

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 3 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

Creating dynamic buttons

Learning new things every day... Thanks Tony and best wishes for the New Year to CSSCreator team and participants!

Tech Nossomy