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

￡神魔★判官ぃ 2022-10-10 09:47 256阅读 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 条评论，256人围观）

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

相关阅读

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

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

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

相关简约好看导航栏(HTML、CSS)

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

迷南。/ 2023年10月03日 12:39/ 0 赞/ 11 阅读

相关 element 按钮样式：确认按钮发布后样式发生改变

场景：确认按钮发布后样式发生改变，发布后，点击确认按钮，背景色消失，添加红色focus即可 <el-button type="text" class=

╰半橙微兮°/ 2023年07月01日 08:45/ 0 赞/ 39 阅读

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

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

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

相关 CSS样式实现选择按钮

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

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

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

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

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

相关 css 按钮按下样式

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

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

相关 CSS按钮样式

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

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

相关 input按钮上传按钮样式

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

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

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

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

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