Software development, photography, jokes, ....


Sites by me

 
tas-logoTransportation Administration System
snoezelkussen-logo-kleinstSnoezelkussens voor verstandelijk gehandicapten
ikzoekeenbegeleider-logoBegeleiders voor gehandicapten
Laat uw hond het jaarlijkse vuurwerk overwinnen
Betuweroute en Kunst
logo 50x50Hey Vos! Je eigen naam@vos.net emailadres?
Kunst in huis? Nicole Karrèr maakt echt bijzonder mooie dingen
nettylogo2Kunst in huis? Netty Franssen maakt ook bijzonder mooie dingen
Professionele opvang bij Gastouderbureau
Kind-Zijn
Salarisadministratie en belastingadvies bij
De Zaak Loont
Zutphense Bomenstichting

Hosting Favorites

 
ANU Internet Services
XelMedia .internet Services
register.com

Blogroll

 
Bomenstichting
LassoSoft
MacFreak
Quality that computes
The Economy of Motion
Wheel 2.0
IntrAktv



Website Hosting bij Xel Media


Marc's Place


 

CSS buttons

Today I converted all download links on this site, from using Javascript + CSS to style them to CSS-only (with a background image). I kept some CSS from the JSbuttons installation, because that is how I still want them to look. In case you're interested, here's the CSS:

General CSS:

.mybutton {
   display: block;
   position: relative;
   float: left;
   background: #aaa;
   padding: 5px;
   margin-top: 0px;
   margin-bottom: 10px;
   border: 1px solid gray;
   border-radius: 5px;
   text-decoration: none;
   text-align: center;
   color: #fff;
   font-style: normal;
   font-weight:bold;
   line-height: 15px;
   cursor: pointer;
}

.mybutton:active { background: #444; }
.mybutton:hover { background: #eaeaea; }

.mybutton.blue { background: #2ae; }
.mybutton.blue:hover { background: #05b; }

.mybutton.green { background: #5b5; }
.mybutton.green:hover { background: #282; }

.mybutton.pink { background: #e1a; }
.mybutton.pink:hover { background: #a0a; }

.mybutton.yellow { background: #dd3; }
.mybutton.yellow:hover { background: #aa0; }

.mybutton.black { background: #222; }
.mybutton.black:hover { background: #000; }

.mybutton[class] {
   background-image: url(%pathto(button-shade.png)%);
   background-position: bottom;
}


On a per page basis:

a.mybutton {
   height: 16px;
   width: 100px;
   color: #eeee00;
}

a:hover.mybutton { color:#ff5500; }


And this is the background image (inside the border):


Normal link:.mybutton link:
Go to AppleGo to Apple
<a href="http://www.apple.com/">Go to Apple</a><a href="http://www.apple.com/" class="mybutton blue">Go to Apple</a>

 
 
 
See Older Posts...
© 1997- Marc Vos (and others) Contact Me