很立体的CSS按钮菜单效果

分类 : 代码案例

很立体的CSS按钮菜单效果

很立体的CSS按钮菜单效果

很立体的CSS按钮菜单效果


<style type="text/css">

#menu {display:block; position:relative; background:#edebdc; width:112px; padding:25px; border:1px solid #000; margin:0 auto;}

.white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-top:1px solid #ffdc56; border-right:1px solid #957704; border-bottom:1px solid #937603; border-left:1px solid #ffdc56;overflow:hidden; text-align:center;}

.blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-family:verdana; font-size:11px; font-weight:bold; overflow:hidden; border-top:1px solid #ffd42e; border-right:1px solid #caa205; border-bottom:1px solid #c9a105; border-left:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:15px; background:#fc0;}

.black {position:relative; top:0; left:0; width:102px; height:22px; border:1px solid #000;}

.cona {position:relative; top:0; left:0; width:105px; height:25px; border-top:1px solid #d5d3ca; border-left:1px solid #d5d3ca; background:#f7f6ef;}

.conb {position:relative; top:0; left:0; width:107px; height:27px; border-top:1px solid #b8b7af; border-left:1px solid #b8b7af; background:#f7f6ef;}

.conc {position:relative; top:0; left:0; width:109px; height:29px; border-top:1px solid #9c9b95; border-left:1px solid #9c9b95; background:#f7f6ef;}

.cond {position:relative; top:0; left:0; width:111px; height:31px; border-top:1px solid #d5d3ca; border-left:1px solid #d5dc3a; background:#fff; margin-top:2px;}


#menu a.switch:visited {text-decoration:none;}

#menu a.switch {color:#c00; text-decoration:none; position:absolute;}

#menu a.switch:hover {color:#c00; background:#edebdc; cursor:pointer;}

#menu a.switch:hover .white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-bottom:1px solid #ffdc56; border-left:1px solid #957704; border-top:1px solid #937603; border-right:1px solid #ffdc56;overflow:hidden; text-align:center;}

#menu a.switch:hover .blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-size:11px; font-weight:bold; overflow:hidden; border-bottom:1px solid #ffd42e; border-left:1px solid #caa205; border-top:1px solid #c9a105; border-right:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:17px; background:#eb0;}

</style>


<div id="menu">


<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">

<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item one">ITEM ONE</span></span></a>

</div></div></div></div></div>


<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">

<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item two">ITEM TWO</span></span></a>

</div></div></div></div></div>


<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">


<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item three">ITEM THREE</span></span></a>

</div></div></div></div></div>


<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">

<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item four">ITEM FOUR</span></span></a>

</div></div></div></div></div>


<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">

<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item five">ITEM FIVE</span></span></a>

</div></div></div></div></div>


分类: 代码案例  发布: 2019-07-18-星期四   访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

02-标识符,关键字和保留字
【MySQL】漫谈MySQL体系结构
javascript之标识(zhi)符、关键字与保留字
《MySQL 性能优化》之理解 MySQL 体系结构
MYSQL性能优化之Mysql体系结构,存储引擎
Python语法的使用和简介
底层剖析 Window 、Activity、 View 三者关系
Unity音量可视化——粒子随声浪跳动
JavaScript中this指向问题
css talbe中td溢出隐藏 div溢出隐藏

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
undefined是什么意思啊
vscode----vue中HTML代码tab键自动补全
前端该怎么学?推荐一个学习路线!
.Net轻松处理亿级数据--ClickHouse数据操作
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
html5中datalist标签怎么用
DIV CSS字体(font-family)实现字体样式设置
Mysql里表示布尔型的类型是什么
Datalist options 集合,options语法,optio

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16