html按钮标题横向,CSS3展现横向滚动菜单按钮效果代码

今天给大家分享基于css3实现精美的横向滚动菜单按钮，非常不错，具有参考借鉴价值，需要的的朋友参考下吧

废话不多说，直接上图：

然后是代码：

精美横向滚动菜单按钮 - Glunefish

• Home
• Chat
• About

CSS:

ul{list-style:none;}

ul li a{

display:block;

width:40px;

height:40px;

background:rgb(208,165,37);

margin-top:10px;

text-decoration:none;

line-height:40px;

position:relative;

}

ul li a span{

width:0;

height:40px;

display:block;

visibility:hidden;

overflow:hidden;

font-weight:bold;

position:absolute;

left:40px;

transition:all 0.3s;

}

ul li .a1 span{background:rgb(30,139,180);}

ul li .a2 span{background:rgb(125,163,23);}

ul li .a3 span{background:rgb(175,30,131);}

ul li a:hover span{visibility:visible; width:auto; padding:0 20px;}

为了便于阅读特别优化了一下代码，主要涉及到：

CSS3动画 (transtion)

元素的隐藏 (overflow / visibility)