html如何修改按钮样式,css怎么设置按钮样式?
发布日期:2021-06-24 12:32:27
浏览次数:2
分类:技术文章
本文共 500 字,大约阅读时间需要 1 分钟。
css设置按钮样式的方法:定义一个css选择器,然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮交互时样式。
button样式需要注意的有几点:
1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;
2、建议有一个padding,以免内部文本显得过于拥挤;
2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,更为灵动;
3、获得焦点时应与hover时的效果一致,释放焦点时则回到普通效果。
4、获得焦点时的outline建议去掉,否则较为难看。
普通状态样式设置:.btn{
min-width: 60px;
padding: 5px 8px;
background: #fff;
color: #4daff9;
border: 1px solid #4daff9;
}
交互状态(hover、focus)样式设置:.btn:hover{
color: #fff;
background: #0a90f5;
}
.btn:focus{
color: #fff;
background: #0a90f5;
outline: none;
}
转载地址:https://blog.csdn.net/weixin_32760485/article/details/117795322 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
能坚持,总会有不一样的收获!
[***.219.124.196]2024年04月20日 04时10分47秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
MediaWiki安装
2019-04-27
Squid安装
2019-04-27
如何查看当前Linux的版本
2019-04-27
Ubuntu安装Nginx
2019-04-27
Ubuntu 下安装thttpd Web服务器
2019-04-27
用thttpd做Web Server
2019-04-27
服务器端开发经验总结 Linux C语言
2019-04-27
将网站程序放在tmpfs下
2019-04-27
使用Nginx的proxy_cache缓存功能取代Squid
2019-04-27
nginx 反向代理,动静态请求分离,proxy_cache缓存及缓存清除
2019-04-27
nginx 的proxy_cache才是王道
2019-04-27
Nginx proxy_cache 使用示例
2019-04-27
Nginx源代码分析 - 日志处理
2019-04-27
使Apache实现gzip压缩
2019-04-27
Memcached在大型网站中应用
2019-04-27
Hadoop简要介绍
2019-04-27
squid中的X-Cache和X-Cache-Lookup的意义
2019-04-27
squid 优化指南
2019-04-27
centos vnc配置笔记
2019-04-27
让Squid 显示本地时间
2019-04-27