Css. Style Links, exemple

....:: Aggiungere Un effetto sui Bottoni, tutto in Css.::....
con l' uso di class e di ID (senza l'uso di tabelle)
è senza JavaScript

Personalizzabili in tutto, colori, bordi, grandezza, sfondo, ecc.ecc...

Il browser in uso non supporta frame non ancorati oppure è configurato in modo che i frame non ancorati non siano visualizzati. <br></p> <DIV align=center><CENTER><TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=362 border=0 VALIGN="TOP"> <TBODY><TR><TD align=left width=372> <FORM name=example><DIV align=left> <TABLE border=0 background="../../../sfondi/sfondmaronscur.jpg" style="border-collapse: collapse" cellpadding="0" cellspacing="0"><TBODY><TR><TD> <p style="margin-top: 0; margin-bottom: 0"> <p style="margin-top: 0; margin-bottom: 0"><FONT face=Arial size=2> <INPUT style="filter:progid:DXImageTransform.Microsoft.Shadow(strength=3, Direction=135, Color:beige); style="FONT-SIZE: 8pt; onclick=SelectIt(this.form.Obj) type=button value="Select all" size="20"></FONT></TD> </TR></TBODY></TABLE></DIV> <P style="margin-top: 0; margin-bottom: 0"><FONT face=Arial size=2> <font color="#CC9900"><b> Da Incollare in una nuova pagina !</b></font> <TEXTAREA name=Obj rows=3 cols=57 style="border: 1px dotted darkorange; "> <html><head> <title>Css.bottoni_animati_1</title> <STYLE type=text/css>A.menu1 { BORDER-RIGHT: 3px ridge; PADDING-RIGHT: 2px; BORDER-TOP: 3px ridge; MARGIN-TOP: 5px; DISPLAY: block; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: 3px ridge; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: 3px ridge; TEXT-ALIGN: center; TEXT-DECORATION: none } A.menu1:hover { COLOR: #ffffff; BACKGROUND-COLOR: #CC9900 } </STYLE> </head> <body bgcolor="#0D1427" text="#FFFFFF"> <DIV> <A class=menu1 href="http://www.isolajava.com">Home Page</A> <A class=menu1 href="mailto:valvasev@libero.it">Contact Me</A> </DIV></body></html> </TEXTAREA></FONT></P></FORM></TD></TR></TBODY></TABLE></CENTER></DIV> <hr style="color: #FF9900; width: 80%"> <p align="center"> <iframe name="I2" height="93" src="esempio_bottoni_animati_2.htm" scrolling="no" align="middle" border="0" frameborder="0" width="400"> Il browser in uso non supporta frame non ancorati oppure è configurato in modo che i frame non ancorati non siano visualizzati.

Da Incollare in una nuova pagina ! <html><head> <title>Css. bottoni animati 2</title> <STYLE type=text/css>A.menu1 { BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: red 1px solid; DISPLAY: block; PADDING-LEFT: 4px; FONT-SIZE: 15px; PADDING-BOTTOM: 4px; MARGIN: 0px; BORDER-LEFT: red 1px solid; WIDTH: 200px; COLOR: white; PADDING-TOP: 4px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #cc0000; TEXT-ALIGN: center; TEXT-DECORATION: none } A.menu1:hover { PADDING-RIGHT: 4px; BORDER-TOP: brown 2px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #cc0005 2px solid } </STYLE> </head> <body bgcolor="#0D1427" text="#FFFFFF" topMargin=1 leftMargin=1 link="#CC9900"> <font color="#FFFF00"><b>...:: Esempio nr. 2 ::...</b></font><DIV> <A class=menu1 href="http://www.isolajava.com">Home Page</A> <A class=menu1 href="mailto:valvasev@libero.it">Contact Me</A> </DIV></body></html> <NOSCRIPT>www.isolajava.com</NOSCRIPT>

Il browser in uso non supporta frame non ancorati oppure è configurato in modo che i frame non ancorati non siano visualizzati.

Da Incollare in una nuova pagina ! <html><head> <title>Css. bottoni animati 3</title> <STYLE type=text/css>A.menu1 { BORDER-RIGHT: 3px outset; PADDING-RIGHT: 2px; BORDER-TOP: 3px outset; MARGIN-TOP: 5px; DISPLAY: block; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: 3px outset; WIDTH: 200px; PADDING-TOP: 2px; BORDER-BOTTOM: 3px outset; HEIGHT: 40px; TEXT-ALIGN: center; TEXT-DECORATION: none } A.menu1:hover { FONT-SIZE: 140%; BACKGROUND-IMAGE: url(../sfondi/sfond_brown.jpg); COLOR: Gold; BORDER-TOP-STYLE: inset; BORDER-RIGHT-STYLE: inset; BORDER-LEFT-STYLE: inset; BACKGROUND-COLOR: #0000ff; BORDER-BOTTOM-STYLE: inset } </STYLE> </head> <body bgcolor="#0D1427" text="#FFFFFF" topMargin=1 leftMargin=1 link="#C0C0C0"> <font color="#FFFF00"><b>...:: Esempio nr. 3 ::...</b></font><DIV> <A class=menu1 href="http://www.isolajava.com">Home Page</A> <A class=menu1 href="mailto:valvasev@libero.it">Contact Me</A> </DIV> </body></html> <NOSCRIPT>www.isolajava.com</NOSCRIPT>

Il browser in uso non supporta frame non ancorati oppure è configurato in modo che i frame non ancorati non siano visualizzati.

Da Incollare in una nuova pagina ! <html><head> <title>Css. bottoni animati 4</title> <STYLE type=text/css>A { BORDER-RIGHT: maroon 2px solid; BORDER-TOP: red 2px ridge; DISPLAY: block; FONT-SIZE: 0.8em; BORDER-LEFT: maroon 2px solid; WIDTH: 150px; COLOR: #FFCC99; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #663300; TEXT-DECORATION: none } A:hover { COLOR: #ffffff; BACKGROUND-COLOR: #CC3300 } A DIV { DISPLAY: none } A:hover DIV { DISPLAY: block; FONT-SIZE: 0.8em; COLOR: #000; BACKGROUND-COLOR: #FFCC99 } </STYLE> </head> <body bgcolor="#0D1427" text="#FFFFFF" topMargin=1 leftMargin=1 link="#C0C0C0"> <font color="#FFD700"><b>...:: Esempio nr. 4 ::...</b> (con descrizione dei Links)</font> <A href="http://www.isolajava.com/">Home Page <DIV>Descrizione dettagliata del menu 1<BR>testo e immagini possono essere piazzate qui</DIV></A> <A href="http://www.isolajava.com/guida_css.htm">Guida Css. <DIV>Descrizione detagliata del menu 2<BR>....Alla guida Css.</DIV></A> <A href="mailto:valvasev@libero.it">Contact Me. <DIV>Descrizione detagliata del menu 3<BR>....Contattami qui !</DIV></A> </body></html> <NOSCRIPT>www.isolajava.com</NOSCRIPT>

Il browser in uso non supporta frame non ancorati oppure è configurato in modo che i frame non ancorati non siano visualizzati.

Da Incollare in una nuova pagina ! <html><head> <title>Css. bottoni animati 5</title> <STYLE type=text/css>#navcontainer { MARGIN-LEFT: 30px } #navlist { BORDER-RIGHT: #0099CC 0.2em solid; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BACKGROUND: #336699; PADDING-BOTTOM: 0px; FONT: 0.8em Verdana, sans-serif; MARGIN-LEFT: 0px; WIDTH: 12em; COLOR: white; PADDING-TOP: 0px; BORDER-BOTTOM: #003366 0.2em solid } #navlist LI { FONT-SIZE: 1em; MARGIN: 0px; LIST-STYLE-TYPE: none } #navlist A { BORDER-RIGHT: #035 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #5bd 1px solid; MARGIN-TOP: 0.5em; DISPLAY: block; PADDING-LEFT: 0.75em; BACKGROUND: #39c; MARGIN-BOTTOM: 0.5em; PADDING-BOTTOM: 0.4em; BORDER-LEFT: #fc0 1em solid; COLOR: white; PADDING-TOP: 0.25em; BORDER-BOTTOM: #068 1px solid; TEXT-DECORATION: none } #navlist A#current { BORDER-LEFT-COLOR: #f30; BORDER-BOTTOM-COLOR: #068; BORDER-TOP-COLOR: #5bd; BORDER-RIGHT-COLOR: #035 } #navlist A { WIDTH: 99% } #navlist A { WIDTH: 9.6em; voice-family: inherit } UNKNOWN { WIDTH: auto } #navlist A:hover { PADDING-RIGHT: 0.35em; PADDING-LEFT: 0.9em; BORDER-LEFT-COLOR: #fc0; BACKGROUND: #28b; BORDER-BOTTOM-COLOR: #5bd; PADDING-BOTTOM: 0.25em; BORDER-TOP-COLOR: #069; PADDING-TOP: 0.4em; BORDER-RIGHT-COLOR: #6cf } #navlist A#current:hover { PADDING-RIGHT: 0.35em; PADDING-LEFT: 0.9em; BORDER-LEFT-COLOR: #fc0; BACKGROUND: #28b; BORDER-BOTTOM-COLOR: #5bd; PADDING-BOTTOM: 0.25em; BORDER-TOP-COLOR: #069; PADDING-TOP: 0.4em; BORDER-RIGHT-COLOR: #6cf } #navlist A:active { PADDING-RIGHT: 0.35em; PADDING-LEFT: 0.9em; BORDER-LEFT-COLOR: white; BACKGROUND: #17a; BORDER-BOTTOM-COLOR: #5bd; PADDING-BOTTOM: 0.25em; BORDER-TOP-COLOR: #069; PADDING-TOP: 0.4em; BORDER-RIGHT-COLOR: #6cf } #navlist A#current:active { PADDING-RIGHT: 0.35em; PADDING-LEFT: 0.9em; BORDER-LEFT-COLOR: white; BACKGROUND: #17a; BORDER-BOTTOM-COLOR: #5bd; PADDING-BOTTOM: 0.25em; BORDER-TOP-COLOR: #069; PADDING-TOP: 0.4em; BORDER-RIGHT-COLOR: #6cf } </STYLE> </head> <body bgcolor="#0D1427" text="#FFFFFF" topMargin=1 link="#C0C0C0"> <p style="margin-top: 0; margin-bottom: 0"><font color="#FFCC00"><b>...:: Esempio nr. 5 ::...</b> (abbastanza bellino)</font></p> <DIV id=navcontainer> <UL id=navlist><LI id=active> <A id=current href="http://www.isolajava.com/0guida_Css/Css.bottoni_animati_index.htm#">primo Link</A> <LI><A href="http://www.isolajava.com/0guida_Css/Css.bottoni_animati_index.htm#">secondo Link</A> <LI><A href="http://www.isolajava.com/0guida_Css/Css.bottoni_animati_index.htm#">terzo Link</A> </LI></UL></DIV> </body></html>

Il browser in uso non supporta frame non ancorati oppure è configurato in modo che i frame non ancorati non siano visualizzati.

Da Incollare in una nuova pagina ! <html><head> <title>Css. bottoni animati 6</title> <STYLE type=text/css> ul#navlist { margin: 0 0 0 0px; padding: 0; width: 25%; } #navlist li { list-style-type: none; background-color: #191970; color: #daa520; border: .1em solid #daa520; font-weight: 500; text-align: left; padding: .2em; margin-bottom: .1em; } #navlist li a { color: #daa520; text-decoration: none; display: block; } #navlist li a:hover { background-color: #faebd7; color: #191970; } </STYLE> </head> <body bgcolor="#0D1427"> <p style="margin-top: 0; margin-bottom: 0"><font color="#FFCC00"><b>...:: Esempio nr. 6 ::...</b> (con doppio bordo)</font></p> <div id="navcontainer"><ul id="navlist"> <li id="active"><a href="#" id="current">► primo Link</a></li> <li><a href="#">► secondo Link</a></li> <li><a href="#">► terzo Link</a></li> </ul></div> </body> </html>

Il browser in uso non supporta frame non ancorati oppure è configurato in modo che i frame non ancorati non siano visualizzati.

Da Incollare in una nuova pagina ! <html><head> <title>Css. bottoni animati 7</title> <STYLE type=text/css> #navcontainer { padding: 0; background: #ccc; height: 20px; } #navlist { margin: 0px; padding: 0px 0px; display: block; } #navlist li { list-style: none; float: left; } #navcontainer a, #navlist li.extend { margin: 0px; display: block; border-top: 1px solid #333; padding: 1px 6px; text-decoration: none; background: #ccc; font: normal 12px verdana, serif; color: #000; } #navcontainer a:hover, #navcontainer a#current { padding: 1px 5px; background: #FAFAFA; border-right: 1px solid #333; border-left: 1px solid #333; border-top: 1px solid #FAFAFA; border-bottom: 1px solid #333; color: #000; } #navcontainer a#current { background: #F6F6F6; border-top: 1px solid #F6F6F6; font-weight: bold; } #navcontainer li#active { border-right: 2px solid #828282; border-bottom: 2px solid #828282; } </STYLE> </head> <body bgcolor="#0D1427" text="#FFFFFF" topmargin=0 leftmargin=0"> <p style="margin-top: 0; margin-bottom: 0"><font color="#FFCC00"><b>...:: Esempio nr. 7 ::... (menu Orizzontale)</b></font></p> <p style="margin-top: 0; margin-bottom: 0"> </p> <div id="navcontainer"> <ul id="navlist"><li id="active"><a href="#" id="current">Home Page</a></li> <li><a href="#">secondo Link</a></li> <li><a href="#">Terzo Link</a></li> <li><a href="#">Quarto Link</a></li></ul></div> </body></html>

Il browser in uso non supporta frame non ancorati oppure è configurato in modo che i frame non ancorati non siano visualizzati.

Da Incollare in una nuova pagina ! <html><head> <title>Css. bottoni animati 8</title> <STYLE type=text/css> <STYLE type=text/css>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: black; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: relative } DIV#links { Z-INDEX: 100; LEFT: 0px; FONT: 16px Verdana, sans-serif; WIDTH: 166px; POSITION: absolute; TOP: 1px; HEIGHT: 150px } DIV#links A { BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #505050 5px solid; PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: #444; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; MARGIN: 0px 0px 1px; FONT: bold 1em sans-serif; COLOR: #ffc; PADDING-TOP: 5px; TEXT-ALIGN: center; TEXT-DECORATION: none } DIV#links A:hover { BORDER-RIGHT: white 5px double; BACKGROUND: #aaa; COLOR: #411 } DIV#links A SPAN { DISPLAY: none } DIV#links A:hover SPAN { PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; BACKGROUND: black; LEFT: 0px; PADDING-BOTTOM: 5px; MARGIN: 10px; FONT: 10px Verdana, sans-serif; WIDTH: 150px; COLOR: #aaa; PADDING-TOP: 5px; POSITION: absolute; TOP: 90px; TEXT-ALIGN: center } </STYLE> </head> <body bgcolor="#0D1427" text="#FFFFFF" topmargin=0 leftmargin=0"> <p style="margin-top: 0; margin-bottom: 0"><font color="#FFCC00"><b>...........................................:: Esempio nr. 7 ::... (menu 3D)</b></font></p> <p style="margin-top: 0; margin-bottom: 0"><font color="#FFCC00"><b> ...........................................:: Tutto e modificabile..............</b></font></p> <p style="margin-top: 0; margin-bottom: 0"> </p> <DIV id=links> <A href="http://www.isolajava.com/">Home<SPAN> Torna alla Home Page Iniziale</SPAN></A> <A href="http://www.isolajava.com/">Links<SPAN>Una Grande collezione di Links Utili</SPAN></A> <A href="mailto:derick@ispettore.it">contact<SPAN> Clicca qui per contatarmi, invia una Mail!</SPAN></A> </DIV> </body></html>

....:: Aggiungere Un effetto sui Bottoni, tutto in Css.::.... con l' uso di class e di ID (senza l'uso di tabelle)è senza JavaScript

....:: Aggiungere Un effetto sui Bottoni, tutto in Css.::....
con l' uso di class e di ID (senza l'uso di tabelle)
è senza JavaScript