php页面按钮效果代码_使用CSS3实现的3D按钮精美效果代码

最新推荐文章于 2021-03-27 21:08:56 发布
最新推荐文章于 2021-03-27 21:08:56 发布
阅读量191 收藏
点赞数
文章标签： php页面按钮效果代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39654917/article/details/115105301
版权
这篇博客分享了如何使用CSS3创建一系列3D按钮效果。通过详细的代码展示，展示了如何利用CSS3的渐变、阴影等特性制作出各种颜色和样式的3D按钮，包括粉色、紫色、天空蓝、绿色、黄色、橙色、红色和灰色等。
摘要由CSDN通过智能技术生成

使用css3代码来制作3D按钮效果，这是一个系列的3D按钮制作效果，制作方法是老套(万变不离其中)，但其中色彩的调各非常不错，因为很多效果在PS中制作是容易，特别对于设计师来说更容易，但对于一名coder来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服.

7c1ce11852674ac8e1f9a0d38ffb8ae6.png

CSS3实现的3D按钮效果

body {

background: -webkit-radial-gradient(#fdfdfd,#e5e5e5);

background: -moz-radial-gradient(#fdfdfd,#e5e5e5);

background: -ms-radial-gradient(#fdfdfd,#e5e5e5);

background: -o-radial-gradient(#fdfdfd,#e5e5e5);

radial-gradient(#fdfdfd,#e5e5e5);

}

.demo {

width: 250px;

margin: 80px auto 0;

}

.demo div {

margin-bottom: 20px;

}

.onload,

.search {

position: relative;

display: inline-block;

line-height: 25px;

padding: 10px 15px;

border-radius: 5px;

color: #fff;

font-weight: bold;

text-shadow:0 1px 2px rgba(0,0,0,.4);

}

.onload {

width: 130px;

font-size: 14px;

}

.search {

width: 30px;

margin-left: 20px;

}

.onload:after,

.search:after {

display: inline-block;

font-family: 'icomoon';

font-style: normal;

speak: none;

font-weight: normal;

-webkit-font-smoothing: antialiased;

content: "\21";

font-size: 20px;

padding-left: 5px;

}

. {

content: "\22";

padding-left: 14px;

margin-left: 14px;

}

.onload:before,

search:before {

position: absolute;

top: 0;

right: 0;

display: inline-block;

content: "";

width: 90px;

height: 59px;

background: -webkit-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);

background: -moz-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);

background: -ms-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);

background: -o-radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0) 70%);

radial-gradient(right,rgba(255,255,255,.3),rgba(255,255,255,0 ) 70%);

}

.onload:hover,

.search:hover {

color: #fff;

text-decoration: none;

}

.onload:active,

.search:active {

top:8px;

box-shadow: 0 1px 6px rgba(0,0,0,.2) inset;

}

.pink {

border:1px solid #de73bd;

box-shadow: 0 0 0 1px #883b73,1px 5px 0 #883b73,-1px 5px 0 #883b73,0 6px 8px rgba(0,0,0,.8);

background: -webkit-linear-gradient(top,#d745a4,#bd368d);

background: -moz-linear-gradient(top,#d745a4,#bd368d);

background: -ms-linear-gradient(top,#d745a4,#bd368d);

background: -o-linear-gradient(top,#d745a4,#bd368d);

linear-gradient(top,#d745a4,#bd368d);

}

.onload.pink:after {

box-shadow: -1px 0 0 #8f3879,-2px 0 0 #e691cd;

}

.pink:hover {

background: -webkit-linear-gradient(top,#ea6abd,#bd368d);

background: -moz-linear-gradient(top,#ea6abd,#bd368d);

background: -ms-linear-gradient(top,#ea6abd,#bd368d);

background: -o-linear-gradient(top,#ea6abd,#bd368d);

linear-gradient(top,#ea6abd,#bd368d);

}

.pink:active {

background: -webkit-linear-gradient(top,#bd368d,#bd368d);

background: -moz-linear-gradient(top,#bd368d,#bd368d);

background: -ms-linear-gradient(top,#bd368d,#bd368d);

background: -o-linear-gradient(top,#bd368d,#bd368d);

linear-gradient(top,#bd368d,#bd368d);

}

.purple {

border:1px solid #b271e5;

box-shadow: 0 0 0 1px #883b73,1px 5px 0 #883b73,-1px 5px 0 #883b73,0 6px 8px rgba(0,0,0,.8);

background: -webkit-linear-gradient(top,#9246d7,#8339c2);

background: -moz-linear-gradient(top,#9246d7,#8339c2);

background: -ms-linear-gradient(top,#9246d7,#8339c2);

background: -o-linear-gradient(top,#9246d7,#8339c2);

linear-gradient(top,#9246d7,#8339c2);

}

.onload.purple:after {

box-shadow: -1px 0 0 #5d297b,-2px 0 0 #c998e7;

}

.purple:hover {

background: -webkit-linear-gradient(top,#a35de6,#7733be);

background: -moz-linear-gradient(top,#a35de6,#7733be);

background: -ms-linear-gradient(top,#a35de6,#7733be);

background: -o-linear-gradient(top,#a35de6,#7733be);

linear-gradient(top,#a35de6,#7733be);

}

.purple:active {

background: -webkit-linear-gradient(top,#8339c2,#8339c2);

background: -moz-linear-gradient(top,#8339c2,#8339c2);

background: -ms-linear-gradient(top,#8339c2,#8339c2);

background: -o-linear-gradient(top,#8339c2,#8339c2);

linear-gradient(top,#8339c2,#8339c2);

}

.sky_blue {

border:1px solid #7cccff;

box-shadow: 0 0 0 1px #007ac7,1px 5px 0 #007ac7,-1px 5px 0 #007ac7,0 6px 8px rgba(0,0,0,.8);

background: -webkit-linear-gradient(top,#4db5fe,#3c9be2);

background: -moz-linear-gradient(top,#4db5fe,#3c9be2);

background: -ms-linear-gradient(top,#4db5fe,#3c9be2);

background: -o-linear-gradient(top,#4db5fe,#3c9be2);

linear-gradient(top,#4db5fe,#3c9be2);

}

.onload.sky_blue:after {

box-shadow: -1px 0 0 #2c6c7f,-2px 0 0 #99d5fa;

}

.sky_blue:hover {

background: -webkit-linear-gradient(top,#76c6ff,#3c9ce4);

background: -moz-linear-gradient(top,#76c6ff,#3c9ce4);

background: -ms-linear-gradient(top,#76c6ff,#3c9ce4);

background: -o-linear-gradient(top,#76c6ff,#3c9ce4);

linear-gradient(top,#76c6ff,#3c9ce4);

}

.sky_blue:active {

background: -webkit-linear-gradient(top,#3c9be2,#3c9be2);

background: -moz-linear-gradient(top,#3c9be2,#3c9be2);

background: -ms-linear-gradient(top,#3c9be2,#3c9be2);

background: -o-linear-gradient(top,#3c9be2,#3c9be2);

linear-gradient(top,#3c9be2,#3c9be2);

}

.green {

border:1px solid #9bcf60;

box-shadow: 0 0 0 1px #469a44,1px 5px 0 #469a44,-1px 5px 0 #469a44,0 6px 8px rgba(0,0,0,.8);

background: -webkit-linear-gradient(top,#8dd845,#6fbb31);

background: -moz-linear-gradient(top,#8dd845,#6fbb31);

background: -ms-linear-gradient(top,#8dd845,#6fbb31);

background: -o-linear-gradient(top,#8dd845,#6fbb31);

linear-gradient(top,#8dd845,#6fbb31);

}

.onload.green:after {

box-shadow: -1px 0 0 #597b2d,-2px 0 0 #c6e897;

}

.green:hover {

background: -webkit-linear-gradient(top,#9de15d,#74bf37);

background: -moz-linear-gradient(top,#9de15d,#74bf37);

background: -ms-linear-gradient(top,#9de15d,#74bf37);

background: -o-linear-gradient(top,#9de15d,#74bf37);

linear-gradient(top,#9de15d,#74bf37);

}

.green:active {

background: -webkit-linear-gradient(top,#6fbb31,#6fbb31);

background: -moz-linear-gradient(top,#6fbb31,#6fbb31);

background: -ms-linear-gradient(top,#6fbb31,#6fbb31);

background: -o-linear-gradient(top,#6fbb31,#6fbb31);

linear-gradient(top,#6fbb31,#6fbb31);

}

.yellow {

border:1px solid #e0e571;

box-shadow: 0 0 0 1px #87883b,1px 5px 0 #87883b,-1px 5px 0 #87883b,0 6px 8px rgba(0,0,0,.8);

background: -webkit-linear-gradient(top,#d1d744,#bbbf39);

background: -moz-linear-gradient(top,#d1d744,#bbbf39);

background: -ms-linear-gradient(top,#d1d744,#bbbf39);

background: -o-linear-gradient(top,#d1d744,#bbbf39);

linear-gradient(top,#d1d744,#bbbf39);

}

.onload.yellow:after {

box-shadow: -1px 0 0 #597b2d,-2px 0 0 #c6e897;

}

.yellow:hover {

background: -webkit-linear-gradient(top,#dadd50,#c0c442);

background: -moz-linear-gradient(top,#dadd50,#c0c442);

background: -ms-linear-gradient(top,#dadd50,#c0c442);

background: -o-linear-gradient(top,#dadd50,#c0c442);

linear-gradient(top,#dadd50,#c0c442);

}

.yellow:active {

background: -webkit-linear-gradient(top,#bbbf39,#bbbf39);

background: -moz-linear-gradient(top,#bbbf39,#bbbf39);

background: -ms-linear-gradient(top,#bbbf39,#bbbf39);

background: -o-linear-gradient(top,#bbbf39,#bbbf39);

linear-gradient(top,#bbbf39,#bbbf39);

}

.orange {

border:1px solid #e5bf76;

box-shadow: 0 0 0 1px #88683b,1px 5px 0 #88683b,-1px 5px 0 #88683b,0 6px 8px rgba(0,0,0,.8);

background: -webkit-linear-gradient(top,#e0b956,#bb8231);

background: -moz-linear-gradient(top,#e0b956,#bb8231);

background: -ms-linear-gradient(top,#e0b956,#bb8231);

background: -o-linear-gradient(top,#e0b956,#bb8231);

linear-gradient(top,#e0b956,#bb8231);

}

.onload.orange:after {

box-shadow: -1px 0 0 #7e6a33,-2px 0 0 #e8ce98;

}

.orange:hover {

background: -webkit-linear-gradient(top,#e7c369,#c18838);

background: -moz-linear-gradient(top,#e7c369,#c18838);

background: -ms-linear-gradient(top,#e7c369,#c18838);

background: -o-linear-gradient(top,#e7c369,#c18838);

linear-gradient(top,#e7c369,#c18838);

}

.orange:active {

background: -webkit-linear-gradient(top,#bb8231,#bb8231);

background: -moz-linear-gradient(top,#bb8231,#bb8231);

background: -ms-linear-gradient(top,#bb8231,#bb8231);

background: -o-linear-gradient(top,#bb8231,#bb8231);

linear-gradient(top,#bb8231,#bb8231);

}

.red {

border:1px solid #e57171;

box-shadow: 0 0 0 1px #883b3b,1px 5px 0 #883b3b,-1px 5px 0 #883b3b,0 6px 8px rgba(0,0,0,.8);

background: -webkit-linear-gradient(top,#d74444,#c43a3a);

background: -moz-linear-gradient(top,#d74444,#c43a3a);

background: -ms-linear-gradient(top,#d74444,#c43a3a);

background: -o-linear-gradient(top,#d74444,#c43a3a);

linear-gradient(top,#d74444,#c43a3a);

}

.onload.red:after {

box-shadow: -1px 0 0 #8b3737,-2px 0 0 #e69090;

}

.red:hover {

background: -webkit-linear-gradient(top,#e25c5c,#cc4646);

background: -moz-linear-gradient(top,#e25c5c,#cc4646);

background: -ms-linear-gradient(top,#e25c5c,#cc4646);

background: -o-linear-gradient(top,#e25c5c,#cc4646);

linear-gradient(top,#e25c5c,#cc4646);

}

.orange:active {

background: -webkit-linear-gradient(top,#c43a3a,#c43a3a);

background: -moz-linear-gradient(top,#c43a3a,#c43a3a);

background: -ms-linear-gradient(top,#c43a3a,#c43a3a);

background: -o-linear-gradient(top,#c43a3a,#c43a3a);

linear-gradient(top,#c43a3a,#c43a3a);

}

.gray {

border:1px solid #d6d6d7;

box-shadow: 0 0 0 1px #919191,1px 5px 0 #919191,-1px 5px 0 #919191,0 6px 8px rgba(0,0,0,.8);

background: -webkit-linear-gradient(top,#bdbebf,#ababac);

background: -moz-linear-gradient(top,#bdbebf,#ababac);

background: -ms-linear-gradient(top,#bdbebf,#ababac);

background: -o-linear-gradient(top,#bdbebf,#ababac);

linear-gradient(top,#bdbebf,#ababac);

}

.onload.gray:after {

box-shadow: -1px 0 0 #7b7a7a,-2px 0 0 #dbdbdc;

}

.gray:hover {

background: -webkit-linear-gradient(top,#cbcccd,#9e9fa0);

background: -moz-linear-gradient(top,#cbcccd,#9e9fa0);

background: -ms-linear-gradient(top,#cbcccd,#9e9fa0);

background: -o-linear-gradient(top,#cbcccd,#9e9fa0);

linear-gradient(top,#cbcccd,#9e9fa0);

}

.gray:active {

background: -webkit-linear-gradient(top,#ababac,#ababac);

background: -moz-linear-gradient(top,#ababac,#ababac);

background: -ms-linear-gradient(top,#ababac,#ababac);

background: -o-linear-gradient(top,#ababac,#ababac);

linear-gradient(top,#ababac,#ababac);

}

@font-face {

font-family: 'icomoon';

url('fonts /icomoon.eot');

url('fonts /icomoon.eot?#iefix') format('embedded-opentype'),

url('fonts/icomoon.svg#icomoon') format('svg'),

url('fonts/icomoon.woff') format('woff'),

url('fonts/icomoon.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

DOWNLOAD

DOWNLOAD

DOWNLOAD

DOWNLOAD

DOWNLOAD

DOWNLOAD

DOWNLOAD

DOWNLOAD

weixin_39654917
关注
PHP实现点击button按钮实现页面跳转（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
05-21 397
PHP实现点击button按钮实现页面跳转（附完整源码）
用html CSS实现砸金蛋,css3+js 实现砸金蛋效果
weixin_30276623的博客
07-01 1493
最近闲来无事，在网上看到有人写了个砸金蛋的效果，他是没有用到css3的，当时我就感觉没什么动态效果感觉体验不是很好，所有我就想用css3来改下，于是也来试着写写。本来想弄个视频给你们看看效果的，但是不知道怎么上传视频，就只有给你们看看效果的图片，还有就是图片是我自己弄得不怎么会p图，不要见笑啊！好了，为了不让我们成为键盘侠，我就不贴代码了，大部分地方我都写注释了，所以就不多介绍了，有点基础的都可以...
php页面按钮效果代码_使用jQuery和PHP实现类似360功能开关效果
weixin_32027779的博客
03-09 399
准备工作为了更好的演示本例，我们需要一个数据表，记录需要的功能说明及开启状态，表结构如下：CREATE TABLE `pro` (`id` int(11) NOT NULL auto_increment,`title` varchar(50) NOT NULL,`description` varchar(200) NOT NULL,`status` tinyint(1) NOT NULL defa...
php漂亮按钮代码,使用CSS3制作的一个圆形精美按钮代码
weixin_42509894的博客
03-12 239
这是使用CSS3制作的一个圆形按钮。效果看起来很简单，其实制作也非常的简单的，主要就是径向渐变的运用，以及@font-face实现的ICON效果，当然其中也离开不其他属性的点缀效果，比如说box-shadow制作的阴影，transition制作的动画效果等。代码中所需要的fonts我已经以附件的形式上传了，下载下来，fonts目录和代码页面 平级，这样就没有问题了。不要放错位置哦精美的圆形按钮效果...
php 按钮美化,H5+C3漂亮的5个单选按钮美化动画代码
weixin_39837352的博客
03-10 250
H5+C3漂亮的5个单选按钮美化动画代码html,body {background-color: #272727;display: -webkit-box;display: -ms-flexbox;display: flex;min-height: 100%;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center...
php实现动态按钮效果,CSS实现发光的按钮效果（代码示例）
weixin_42457435的博客
03-09 417
按钮的效果我们经常会用得到，本篇文章就来给大家分享一个漂亮的按钮效果的实现，我们来使用CSS实现一个发光的按钮效果。话不多说，我们直接来看代码以下代码是接下来所有按钮样式的基本代码：HTMLButtonCSS.button {width:80px;height:20px;display: block;padding: 1em 3.2em;border-radius: 1.6em;color: #f...
电商网站通用左侧弹出导航效果代码.zip
07-11
"电商网站通用左侧弹出导航效果代码"是一个专门针对此类需求开发的代码资源，它通常由JavaScript（JS）和CSS等前端技术实现，旨在为用户提供直观且高效的分类浏览体验。 首先，我们要理解这个代码的核心功能。左侧...
web游戏-web开源网页游戏代码（仅供学习使用）
01-05
在Web游戏中，CSS可以用于创建精美的界面和动画效果。 【压缩包子文件的文件名称列表】：未提供具体的文件名，但根据常见的开源项目结构，我们可以推测可能包含以下部分： 1. HTML文件：游戏的界面结构，使用HTML5...
黑色纹理精美的产品下载单页CSS模板_黑色纹理精美产品下载.rar
最新发布
09-10
CSS（层叠样式表）在这里起到了关键作用，它负责定义页面的布局、颜色、字体等视觉效果，使网页呈现出精美的外观。 描述中的 "html" 指出这个模板基于HTML（超文本标记语言）构建，这是网页的基础结构框架。HTML...
PHP获取文本框、密码域、按钮的值实例代码
01-21
获取表单元素提交的值是表单应用中最基本的操作方法。本节中定义 POST()方法提交数据，对获取表单元素提交的值进行详细的讲解。 获取文本框、密码域、按钮的值 获取表单数据，实际上就是获取不同的表单元素的数据。<form>标签中的 name 是所有表单元素都具备的属性，即这个表单元素的名称，在使用时需要使用 name 属性来获取响应的 value 属性值。 所以，添加的所有控件必须定义对应的 name 属性值。另外，控件在命名上尽可能不要重复，以免获取的数据出错。 在程序开发过程中，获取文本框、密码域、隐藏域、按钮以及文本域的值的方法是相同的，都是使用 name 属性来获相应的 value 属
php漂亮按钮代码,使用css样式制作的漂亮按钮
weixin_39622628的博客
03-12 258
这篇文章主要介绍了关于使用css样式制作的漂亮按钮，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下css样式制作的按钮，很漂亮，值得收藏，在下文贴出具体的实现css，喜欢的朋友可以研究下Demo: CSS3 Buttonsbody {background: #ededed;width: 900px;margin: 30px auto;color: #999;}p {margin: 0...
php漂亮按钮代码,分享一款金属感十足的按钮样式代码
weixin_31995251的博客
03-12 416
在项目中，几乎所有的网站都会用到按钮，多则十几个，少则几个。一个实用又好看的按钮，能给页面增色不少，从而更能吸引用户的眼球。在浏览网站的时候，看到一些好看的，炫酷的按钮，拿过来和大家分享分享，下次如果需要使用的时候，直接复制就可以。HTML部分：PUSHCSS部分：body {background: #ddd;}#button {width: 100px;height: 100px;border-...
php注册按钮代码,单击按钮运行PHP代码
weixin_35343788的博客
03-10 1047
这是我能想到的最好的。希望这是你想要的。/* Function that we create to handle backwards compatiblity to browsers.What it does is to try diffrent types of XMLHttpRequests. */function getXMLHttp() {var xmlHttp;try {//Firefo...
php下载按钮代码怎么写,WordPress 自定义下载按钮 纯代码实现
weixin_35990358的博客
03-25 548
FavoriteWordPress 有这种下载插件 但是过多插件会影响网站 自定义下载按钮会显示一长串的 html 代码，看着眼镜不舒服1. 把下面代码复制到 functions.php//添加下载按钮functionappthemes_add_quicktags() {?>QTags.addButton( 'downs', '下载按钮', '本地下载' );添加完这段代码后，在传统编辑器...
按钮里面怎么加php代码,如何在单选按钮中集成php代码?
weixin_34929072的博客
03-27 140
fiddle对于我在代码库中使用的单选按钮。开/关Homepage Tiles{"toggle_status"}==3){echo'checked';}?>/>On{"toggle_status"}==0){echo'checked';}?> />Off我想知道如果($data->{“切换状态”}==3)(表示当切换为在我想集成的php代码片段是:$special_r...
php 按钮的颜色代码,html怎么给按钮换颜色？html button标签的使用介绍
weixin_42518838的博客
03-09 790
本篇文章主要的介绍了关于html button按钮标签的一些应用，主要是介绍了button标签如何换颜色等，本章中都是基础的知识，希望大家好好掌握，多多练习，现在让我们一起来看这篇文章吧首先我们先介绍下按钮的标签：标签定义一个按钮。在 button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。控件与相比，提供了更为强大的功能和更丰富的内容。与标签...
php好看的按钮,CSS实现的几个非常好看的按钮
weixin_36434967的博客
03-11 124
CSS实现的几个非常好看的按钮.btn {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(Gradient...
php 花样button格式,分享CSS按钮的多种制作方式，附CSS按钮样式代码
weixin_39997400的博客
03-24 379
在项目中，几乎所有的网站都会用到按钮，多则十几个，少则几个。一个实用又好看的按钮，能给页面增色不少，从而更能吸引用户的眼球。本文主要讲述CSS按钮的多种写法和CSS按钮的美化，最后会展示一款常见的CSS按钮样式代码，供参考。好，继续往下看吧！一、CSS按钮的多种写法CSS按钮可以用button直接写，写可以用a标签写，还可以用input写，当然也可以用div，你可以根据每个标签的特点，使用不同的样...
使用HTML5和CSS写一个精美的登陆界面
05-19
<form action="/action_page.php"> <label for="uname"><b>Username</b></label> <label for="psw"><b>Password</b></label> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值