CSS自适应宽度圆角按钮
来源:互联网 发布:乐乎城市青年公寓好吗 编辑:程序博客网 时间:2024/05/21 15:03
1.背景图片实现
Html代码:
- a { display: block; float:left; margin-left:5px; height: 37px;line-height: 37px; background: url(btn_bg.png) no-repeat 0px 0px; color: #d84700; text-decoration: none; padding-left:18px; }
- a span { display:block; background: url(btn_bg.png) no-repeat right 0px; padding-right:20px;}
- a:hover { background: url(btn_bg.png) no-repeat 0px -37px;}
- a:hover span{ background: url(btn_bg.png) no-repeat right -37px;}
Html代码:
- <p>
- <a href="#"><span>免费注册</span></a>
- <a href="#"><span>登录</span></a>
- <a href="#"><span>自适应宽度</span></a>
- </p>
原理就是做一个足够宽的背景,a和span都用同一张背景图,文字左侧部分显示的是a的背景,文字本身和右侧部分显示的是span的背景,拼接成一个按钮。
2.CSS3 火狐和Chrome实现
Html代码:
- .button1{
- -moz-border-radius:5px;
- -webkit-border-radius:5px;
- border-radius:5px;
- -moz-box-shadow:0 1px 0 rgba(0,0,0,0.3);
- -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.3);
- box-shadow:0 1px 0 rgba(0,0,0,0.3);
- background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);
- background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));
- color:#4A4A4A;
- float:left;
- font-family:arial,helvetica,sans-serif;
- font-size:17px;
- font-weight:bold;
- padding:10px 15px;
- text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);
- }
- .button1:hover{
- background: -moz-linear-gradient(19% 75% 90deg,#D6D6D6, #FAFAFA);
- background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#D6D6D6));
- }
Html代码 :
- <p><a class="button1">渐变圆角按钮</a></p><br />
Html代码 :
- .button7{
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- border-radius:3px;
- background: -moz-linear-gradient(19% 75% 90deg,#F0DEB8, #FDF0D1, #fff 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F0DEB8), color-stop(.3,#FDF0D1));
- color:#836d4d;
- float:left;
- font-family:arial,helvetica,sans-serif;
- font-size:15px;
- font-weight:bold;
- padding:6px 70px;
- border: 1px solid #d4c198;
- }
- .button7:hover{
- background: -moz-linear-gradient(19% 75% 90deg,#EBD9B4, #F2E6C8, #F5F5F5 100%);
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#EBD9B4), color-stop(.3,#F2E6C8));
- }
- <a class="button7">站长网</a>
- CSS自适应宽度圆角按钮
- CSS自适应宽度圆角按钮
- [CSS]自适应宽度圆角按钮
- CSS自适应宽度圆角按钮
- [CSS]自适应宽度按钮
- CSS自适应宽度按钮
- 圆角自适应宽度按钮的css实现
- CSS背景图片自适应文字宽度圆角按钮
- CSS滑动门技术宽度自适应按钮
- CSS实现自适应宽度
- css自适应宽度
- css宽度自适应
- [ CSS ] div宽度自适应!
- CSS布局-宽度自适应
- CSS 宽度自适应总结
- css 自适应宽度
- css布局 宽度自适应
- css div自适应宽度
- 第9天—15天学习总结
- HDOJ 【C】1.1.6 A+B for Input-Output Practice (VI)
- Objective-C 2.0数据类型
- poj1011
- JFreechart创建刻度蜘蛛环图
- CSS自适应宽度圆角按钮
- shrio入门
- 同事讲的关于小孩和LINUX的故事
- NSNotification的几点说明
- Liferay Portal 介绍
- 使用ContactsContract API
- HDOJ 【C】1.1.7 A+B for Input-Output Practice (VII)
- Eclipse快捷键大全
- 解决flexgrid显示日期的问题