Bottoni Rollover (per gente inesperta)

[pierofix]

Figurati: è sempre un piacere. Alla prossima.

[thomas_anderson]

Ricordati che per ottenere l'effetto bottone devi alternare il colore dei bordi, oppure usare inset ed outset:

#nav li {
  display: inline; /* Solo IE */
}
#nav a {
  display: block;
  width: 150px;
  margin: 1px 0;
  padding: 5px 3px;
  background: #f8f8ee; /* Piero's nice color :D */
  border: 1px solid;
  border-color: #ccc #aaa #aaa #ccc;
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
#nav a:hover {
  background: #eee;
  color: #000;
  border: 1px solid;
  border-color: #aaa #ccc #ccc #aaa; /* colori invertiti */
}

[Cadmir]

Ok grazie ancora

[Cadmir]

Ragazzi scrivo sempre qui8 per non creare casini.
Ma ora io ho il mio file CSS, applicato ad un bottone. Poichè nel menù, l'immagine scelta non sarà l'unica, e quindi ci sranno piu bottoni diversi con il rollover, come posso fare a fare ciò? Non penso che devo inserire più style text/css.
Come si fa?
Grazie mille

[Cadmir]

Per piacere mi potete aiutare?
Non so proprio come fare. Vi prego, vi scongiuro in ginocchio. Aiutatemi per favore

[thomas_anderson]

Vuoi dire più bottoni di uno stesso menu diversi o menu diversi? :master:

[Cadmir]

Ontendo bottoni che stanno nello stesso menù. Ho proato a fare un'altro style text/css ma come già detto poichè è nello stesso menù, ne legge uno solo di a:hover.
Spero mi possiate aiutare!
Grazie mille

[thomas_anderson]

Tu hai questo codice:

a {
   text-decoration:none;
   display:block;
   width:200px; height:100px;
   text-indent:-1000em;
   background:#fff url(blog.gif) no-repeat 0 0;
}
a:hover { background-image:url(blog_hover.gif) }

Basta inserire degli id al posto giusto:

a#primobottone {
  text-decoration: none;
  display: block;
  width: 200px;
  height: 100px;
  text-indent: -1000em; /* per il preload dell'immagine */
  background: #fff url(sfondo1.gif) no-repeat 0 0;
}
a#primobottone:hover {
  background: #fff url(sfondo1_over.gif) no-repeat 0 0;
}

E così via per tutti gli altri.

[Cadmir]

a#primobottone {
  text-decoration: none;
  display: block;
  width: 200px;
  height: 100px;
  text-indent: -1000em; /* per il preload dell'immagine */
  background: #fff url(sfondo1.gif) no-repeat 0 0;
}
a#primobottone:hover {
  background: #fff url(sfondo1_over.gif) no-repeat 0 0;
}

Ok questa parte del #primobottone mi è chiara, ma allora la devo inserire anche nel codice a href.... tipo:

<a#primobottone href src="www.html.it">Html.it</a>

oppure anche al tag di chiusura tipo:

<a#primobottone href src="www.html.it">Html.it</a#primobottone>

Si fa così? Io non lo so, a queste soluzioni ci sono arrivato di logica, e non sono sicuro che sono vere. Quindi mi rivolgo a voi, è così?
Grazie millissimo

[thomas_anderson]

VVoVe:

Il codice è così:

<a href="http://www.html.it/" title="Bel sito!"
id="primobottone" accesskey="1" hreflang="it">
Html.it</a>