This article describes the CSS implementation of adaptive width of the menu button effect code. Share to everyone for your reference. Specifically as follows:
This is a CSS based on the adaptive width of the button effect code, this effect you can say it is a menu, it can also be said that it is a CSS button writing examples, I do not know whether you found that the length of the menu items can be adapted to the number of words, the more text, it will be longer, less text, it will be shorter, very intelligent bar. Like this can be adapted to the menu, its practicality greatly enhanced, and the code is quite concise, to share with you for reference.
The screenshot of the running effect is as follows:
The specific code is as follows:
The code is as follows: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<title> Button </title>
<body>
<style type= "Text/css" >
. Nav{overflow:hidden;position:absolute;}
. Nav a{margin:0 2px;float:left;line-height:24px;text-decoration:none;background:-webkit-gradient (linear, 0 0, 0 100%, from (#f4f4f4) , to (#ebeaea)); Background:-moz-linear-gradient (top, #f4f4f4, #ebeaea); filter:progid:d XImageTransform.Microsoft.gradient (startcolorstr= #f4f4f4, endcolorstr= #ebeaea, Grandientt ype=1); Border:solid 1px #cccdce; color: #333; font-weight:bold;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
. Nav a span{display:inline-block;padding:0 22px; Border:solid 1px #fff; cursor:pointer;}
. Nav A:hover{text-decoration:none;color: #fff background:-webkit-gradient (linear, 0 0, 0 100%, from (#ef2b10), to (# D91C02)); Background:-moz-linear-gradient (top, #ef2b10, #d91c02); filter:progid:d XImageTransform.Microsoft.gradient (startcolorstr= #ef2b10, endcolorstr= #d91c02, Grand ienttype=1); Border:solid 1px #ce2100;}
. Nav a:hover span{border:solid 1px #fa6058;}
</style>
<div class= "NAV" >
<a href= "#" ><span> home </span></a>
<a href= "#" ><span> home </span></a>
<a href= "#" ><span> Web Effects </span></a>
<a href= "#" ><span> Hyper-Scripting effects </span></a>
<a href= "#" ><span> Scripting Home offers boutique script downloads </span></a>
<a href= "#" ><span> Latest web effects </span></a>
</div>
</body>
I hope this article will help you with CSS web design.