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

￡神魔★判官ぃ 2022-10-10 09:47 238阅读 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

[52e6d9f8a83016755879f74a32a7d2cc.png]: /images/20221005/f754cb37deed42fe985b881906d5476f.png
[e2a1afbd8595ca731d266cd869ebef7a.png]: /images/20221005/afa49d97ebd24f739cb882047faae4e5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

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

相关阅读

相关简约好看侧边栏(HTML、CSS)

简约好看侧边栏(HTML、CSS) <!DOCTYPE html> <html lang="en"> <head> <m

不念不忘少年蓝@/ 2023年10月03日 12:54/ 0 赞/ 2 阅读

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

标签：按钮： .blog-but\{ /\ 按钮美化 \/ width: 270px; /\ 宽度 \/ height: 40px; /\ 高度 \/ border

￡神魔★判官ぃ/ 2022年10月10日 09:47/ 0 赞/ 239 阅读

相关 CSS3样式控制input按钮效果

.clearfix:before, .clearfix:after { display: table; content: " ";

待我称王封你为后i/ 2022年09月25日 12:21/ 0 赞/ 261 阅读

相关 HTML/CSS 自定义开关按钮控件(switch)样式

今天这篇文章给大家带来的是在移动端很常见的开关按钮控件。样式主要是通过CSS来定制完成，上一篇博客讲的是[自定义滑动条的样式][Link 1]，同样是自定义样式，上一篇是直接通

Dear 丶/ 2022年07月21日 12:13/ 0 赞/ 642 阅读

相关 CSS样式实现选择按钮

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

秒速五厘米/ 2022年06月13日 06:24/ 0 赞/ 349 阅读

相关前端存储--简约的input样式

一、输入框 1）代码： .login_input_password{ width: 250px; height: 42px;

蔚落/ 2022年05月31日 01:22/ 0 赞/ 191 阅读

相关 css 按钮按下样式

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

布满荆棘的人生/ 2022年02月20日 05:17/ 0 赞/ 514 阅读

相关 CSS按钮样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <t

朴灿烈づ我的快乐病毒、/ 2022年02月05日 12:59/ 0 赞/ 392 阅读

相关 input按钮上传按钮样式

主要是定位和不透明度来实现： <!DOCTYPE html> <html lang="en"> <head> <meta charse

╰半夏微凉°/ 2021年12月17日 09:37/ 0 赞/ 463 阅读

相关 css小技巧,菜单栏按钮hover样式与按钮默认样式冲突

![在这里插入图片描述][20191028113226132.png] 蓝色背景是默认样式，灰色背景是`hover`样式。初写菜单栏时，代码夸夸夸一顿敲。发现把鼠标移到蓝

野性酷女/ 2021年07月04日 18:48/ 1 赞/ 825 阅读