行动派行动派
  • 首页
  • 随笔
  • 建站
  • 设计
  • 前端
  • 读书
  • 歌单
  • 相册
  • 视频
  • 邻居
  • 首页
  • 随笔
  • 建站
  • 设计
  • 前端
  • 读书
  • 歌单
  • 相册
  • 视频
  • 邻居
主页 › 建站 › Begin 主题“提交评论”按钮美化
#建站#

Begin 主题“提交评论”按钮美化

9月前
432 1 0

今天分享一段 CSS 样式,让 Begin 主题的“提交按钮”圆角显示并添加弥散阴影。在主题目录下找到 style.css 文件,找到以下这段代码:

#respond #submit {
	background: #fff;
	width: 50%;
	margin: 5px 0 15px 0;
	padding: 8px;
	cursor: pointer;
	border: 1px solid #ddd;
	border-radius: 2px;
	-webkit-appearance: none;
}

替换成下面这段代码即可:

#respond #submit {
    background: #38a3fd;
    width: 15%;
    margin: 5px 0 15px 0;
    padding: 8px;
    cursor: pointer;
    border: 1px solid #38a3fd;
    border-radius: 25px;
    -webkit-appearance: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(56,163,253,0.6);
}

最终效果:
Begin 主题“提交评论”按钮美化-行动派

如果是设计从业者,应该都了解过弥散阴影吧,特别是 UI 设计,近年应用很广泛,是一个形状图层通过羽化和调整透明度形成的一种阴影。比直接的投影更加柔和、有层次感,可以提升界面的品质。

0
Action
相关文章
一个简单操作让smartideo插件支持播放B站1080P视频
美化WordPress平台下的netease-music网易云音乐插件
数据库清理的一些思路
停用 OSS 对象存储,如何将 OSS 上的文章图片迁移回服务器?
如何将优酷 KUX 格式视频转换为 MP4 格式?这个方法最简单!
评论 (1)
再想想
  • MAY的SEO博客

    这个样式还不错哦

    8月前
    回复
Action站长
要努力,要酷,要做一个可爱的人!
165文章 331评论 39获赞
猜你喜欢
Begin 主题[阅读全文]按钮更改为鼠标经过滑出显示
2年前
全方位的 wordpress 安全插件 All In One WP Security
2年前
读书笔记:图标的设计原则
3年前
如何绑定自己的域名来使用阿里云对象存储 OSS?
2年前
WordPress 代码高亮插件 io-code-highlight
9月前
  • 今日快讯
  • 站点地图
  • 给我留言
  • 给我投稿
Copyright © 2014-2021 行动派. Designed by nicetheme. 萌ICP备20201122号 粤ICP备14089240号