html简约按钮样式,简约CSS按钮样式设计+文字特效

￡神魔★判官ぃ 2022-10-10 09:47 310阅读 0赞

标签：

按钮：

.blog-but{ /* 按钮美化 */

width: 270px; /* 宽度 */

height: 40px; /* 高度 */

border-width: 0px; /* 边框宽度 */

border-radius: 3px; /* 边框半径 */

background: #1E90FF; /* 背景颜色 */

cursor: pointer; /* 鼠标移入按钮范围时出现手势 */

outline: none; /* 不显示轮廓线 */

font-family: Microsoft YaHei; /* 设置字体 */

color: white; /* 字体颜色 */

font-size: 17px; /* 字体大小 */

}

.blog-but:hover { /* 鼠标移入按钮范围时改变颜色 */

background: #5599FF;

图片展示：

52e6d9f8a83016755879f74a32a7d2cc.png

文字特效：

h1 {

width:100%; display:block;

line-height:1.5em;

overflow:visible; font-size:22px;

text-shadow:#f3f3f3 1px 1px 0px, #b2b2b2 1px 2px 0

}

/* 起关键作用的是：

text-shadow:#f3f3f3 1px 1px 0px, #b2b2b2 1px 2px 0*/

图片展示：

e2a1afbd8595ca731d266cd869ebef7a.png

标签：

来源： https://blog.csdn.net/qq\_42280739/article/details/82689098

发表评论

表情：
评论列表 （有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS样式实现选择按钮

    CSS样式实现选择按钮 表单元素中的选择按钮的原生样式并不好看，在实际项目中需要优化。很多优化的方法都用CSS美化按钮的原生样式，或用图片来代替原生样式。本文描述了使用C

    秒速五厘米秒速五厘米/ 0 赞/ 419 阅读

    相关 css 按钮按下样式

    在项目开发中，按钮通常需要添加按钮的获得焦点状态，电脑端用 :hover 移动端用 :active 。多个按钮需要添加时，就得添加多个获得焦点样式。 可通过添加背景图片的方式

    布满荆棘的人生布满荆棘的人生/ 0 赞/ 600 阅读