Библиотека Javascript. SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>Блок при наведении с оригинальным обрамлением</title> <style type="text/css" media="screen,print"> html,body{margin:0;padding:0;color:#000;background:#fff;}body{padding:1em 0;font:76%/1.5 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica,Arial,sans-serif;}h1,h2,h3,h4,h5,h6{margin:0 0 .5em;color:#444;font:normal 1em/1.2 Georgia,Times,serif;}h1{font-size:2em;}h2{font-size:1.5em;}h3{font-size:1.2em;}p{margin:0 0 1em;}a:link{color:#8f1f08;}a:visited{color:#5f1406;}a:hover,a:focus,a:active{color:#800000;background-color:#e3e0d1;}code,kbd{font-family:Monaco,"Courier New",Tahoma;}.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:".";}* html .clearfix{height:1px;}.clearfix{display:inline-block;}.clearfix{display:block;}.structural{position:absolute;left:-9999px;}#labfooter{clear:both;margin-top:.5em;padding-top:.5em;border-top:1px solid #ccc;text-align:center;}.code{margin:1em 0;padding:3px 5px 3px 3em;border:1px solid #98be10;list-style-type:decimal-leading-zero;font-family:Courier;}.code code{font-family:Monaco,"Courier New",Tahoma;}.code li{margin:2px 0;padding:0 5px;background:#f7f7f5;}.code li.tab1{padding-left:4ex;}.code li.tab2{padding-left:8ex;}.code li.tab3{padding-left:12ex;}.code li.tab4{padding-left:16ex;}.code li.tab5{padding-left:20ex;}.code .changed{color:#900;font-weight:bold;}.code em{color:#900;font-weight:bold;font-style:normal;}/* Demo page styling */ body {padding:0} #wrap { max-width:50em; margin:2em auto; } .button:link, .button:visited, .button:hover {border:none;} * html #wrap {width:50em} /* End Demo page styling */ .button:link, .button:visited { /* Top left corner, top edge */ float:left; color:#ddd; background:#333 url(Bulletproof\ shrinkwrapping\ buttons_files/button00.gif) no-repeat; font:1.2em/1.0 Georgia,serif; text-decoration:none; } .button * {display:block;} .button span { /* Top right corner */ padding:6px 0 0; background:url(Bulletproof\ shrinkwrapping\ buttons_files/corners0.gif) no-repeat right top; } .button span span { /* Bottom left corner, left and bottom edges */ padding:0 0 0 6px; background:url(Bulletproof\ shrinkwrapping\ buttons_files/button00.gif) no-repeat left bottom; } .button span span span { /* Bottom right corner */ padding:0 0 6px; background:url(Bulletproof\ shrinkwrapping\ buttons_files/corners0.gif) no-repeat right bottom; } .button span span span span { /* Right edge */ padding:3px 12px 3px 6px; /* Extra padding (3px vertical, 6px horizontal) added to give the text some breathing room */ background:url(Bulletproof\ shrinkwrapping\ buttons_files/button00.gif) no-repeat right center; } .button:hover, .button:focus, .button:active { /* Make the button more visible on :hover and :focus */ outline:2px solid #ff0; /* Not supported by IE/Win :-( */ color:#fff; } /* Put the demo buttons on separate rows with some space between */ div {clear:both;} .button {margin:0 0 1em;} </style> </head> <body> <div id="wrap"> <h1>Текст выделяется обрамлением</h1> <div> <a class="button" href=""> <span><span><span><span>Float and shrinkwrap!</span></span></span></span> </a> </div> <div> <a class="button" href=""> <span><span><span><span>Go!</span></span></span></span> </a> </div> <div> <a class="button" href=""> <span><span><span><span>A button with way too much text</span></span></span></span> </a> </div> </div> <div style=" position:absolute; bottom:+30; left:30% "><center><a style="COLOR: #000;font: 80% Verdana,Arial,sans-serif;" href=http://www.03www.su/>Библиотека JAVASCRIPT 1997- 2010 (июль 2010 г.) Дизайн и сопровождение © SE@RCHER</a></center></div></body> </html>