CSS3设置按钮的样式

2024-04-01 09:14:55

平面按钮样式——现主流

在实际开发中，按钮的应用是必不可少
使用 CSS 来制作按钮，可以更有新意，更有趣，也可以自定义自己想要的样式

平面样式按钮的使用现在非常流行，并且符合无处不在的平面设计趋势

实现方式

.button {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;
}

按钮颜色

颜色：Green ，Blue， Red， Gray ，Black
实现方式


.button1 {background-color: #4CAF50;
}

按钮大小

尺寸10px ，12px ，16px 20px ， 24px
可以使用 font-size 属性来设置按钮大小
实现方式

.button1 {font-size: 10px;
}

圆角按钮

弧度：2px ，4px ，8px ，12px ，50%
可以使用 border-radius 属性来设置圆角按钮

实现方式

.button1 {border-radius: 2px;
}

边框样式CSS按钮

边框样式按钮与平面按钮属于同一类。唯一的区别是，将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态

按钮边框颜色

绿蓝红灰黑
可以使用 border 属性设置按钮边框颜色
实现方式

.button1 {background-color: white;color: black;border: 2px solid #4CAF50; /* Green */
}

鼠标悬停按钮

可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式
提示: 可以使用 transition-duration 属性来设置 “hover” 效果的速度

实现方式

/* 上图蓝色按钮 */
.button {-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;
}.button:hover {background-color: #4CAF50; /* Green */color: white;
}

按钮阴影

阴影按钮鼠标悬停后显示阴影
使用 box-shadow 属性来为按钮添加阴影

实现方式

.button1 {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}.button2:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

按钮动画

这些“按下”式按钮结合了一些平面设计和假象，让用户感觉他们实际上按下了按钮。当用户按下它时，它似乎陷入了页面。它的实现需要用到阴影来设置，使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态

实现方式

 button {width: 200px;height: 100px;color: #fff;background-color: #6496c8;border: none;border-radius: 15px;box-shadow: 0 10px #27496d;
}

CSS3设置按钮的样式相关推荐

css3 placeholder 特效,css3如何设置placeholder的样式
本篇文章给大家带来的内容是介绍如何使用css3设置placeholder的样式,让大家了解placeholder是什么,如何使用,如何修改修改(设置)其样式.有一定的参考价值,有需要的朋友可以参考一下 ...
html向左箭头样式,详解Bootstrap的纯CSS3箭头按钮样式
简要教程这是一款基于Bootstrap的纯CSS3箭头按钮样式.该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮. [相关视频推荐:Bootstrap教程] 安装可以 ...
qt中继承pushbutton自定义控件设置按钮样式
提要继承QPushButton后的按钮,设置其样式. 实现在自定义的控件类中添加Q_OBJECT宏在自定义的控件的类中重写paintevent函数自定义的控件在使用时,必须指明其父对象使用样 ...
PHP设置按钮不可用,css怎么控制按钮不可用,button按钮css样式
css怎么控制按钮不可用CSS怎么控制按钮不可用,方法:添加"pointer-event 3360 none:"按钮元素样式,以使按钮元素永远不会成为鼠标事件的目标,并使其单击事件 ...
html按钮样式_一组强大的CSS3 Material 按钮
插件简介今天我们要给大家带来一组很漂亮的CSS3按钮,按钮的整体风格采用Material设计样式,非常简洁和清新.在这组CSS3按钮中,样式各种各样,有圆形按钮,也有带小图标的按钮,当然颜色也有很多 ...
C#设置按钮鼠标进入时半透明样式
C#设置按钮鼠标进入时半透明样式设置按钮的属性: FlatStyle = Flat: BorderSize = 0: BackColor = Transparent: 设置MouseEnter触发函 ...
CSS3设置Div左右两边或者上下边框的样式
关于CSS3设置Div左右两边或者上下边框的样式目前可以通过如下方法,实现div只显示某些边框. 1.border: 1px dashed lightgray; border-top: none; ...
css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
前端开关按钮样式_7款外观迷人的HTML5/CSS3 3D按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
考虑到可访问性，使用 CSS 设置按钮样式
按钮在网站上有很多用途--有用于悬停在图像上和在网页上导航的大按钮,以及用于显示有关您的产品或服务的信息的更微妙的按钮. 然而,按钮甚至可以吓倒经验丰富的网页设计师. 按钮有许多可能需要很长时间才能掌 ...

最新文章

热门文章