html5 按钮css样式修改,css样式制作的漂亮按钮

最新推荐文章于 2024-05-16 03:09:27 发布
最新推荐文章于 2024-05-16 03:09:27 发布
阅读量718 收藏
点赞数
文章标签： html5 按钮css样式修改

复制代码代码如下:

Demo: CSS3 Buttons

body {

background: #ededed;

width: 900px;

margin: 30px auto;

color: #999;

}

p {

margin: 0 0 2em;

}

h1 {

margin: 0;

}

a {

color: #339;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

div {

padding: 20px 0;

border-bottom: solid 1px #ccc;

}

/* button

---------------------------------------------- */

.button {

display: inline-block;

zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */

*display: inline;

vertical-align: baseline;

margin: 0 2px;

outline: none;

cursor: pointer;

text-align: center;

text-decoration: none;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

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

-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

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

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

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

}

.button:hover {

text-decoration: none;

}

.button:active {

position: relative;

top: 1px;

}

.bigrounded {

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

}

.medium {

font-size: 12px;

padding: .4em 1.5em .42em;

}

.small {

font-size: 11px;

padding: .2em 1em .275em;

}

/* color styles

---------------------------------------------- */

/* black */

.black {

color: #d7d7d7;

border: solid 1px #333;

background: #333;

background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');

}

.black:hover {

background: #000;

background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');

}

.black:active {

color: #666;

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');

}

/* gray */

.gray {

color: #e9e9e9;

border: solid 1px #555;

background: #6e6e6e;

background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');

}

.gray:hover {

background: #616161;

background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));

background: -moz-linear-gradient(top, #757575, #4b4b4b);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');

}

.gray:active {

color: #afafaf;

background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');

}

/* white */

.white {

color: #606060;

border: solid 1px #b7b7b7;

background: #fff;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');

}

.white:hover {

background: #ededed;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');

}

.white:active {

color: #999;

background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');

}

/* orange */

.orange {

color: #fef4e9;

border: solid 1px #da7c0c;

background: #f78d1d;

background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

}

.orange:hover {

background: #f47c20;

background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');

}

.orange:active {

color: #fcd3a5;

background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');

}

/* red */

.red {

color: #faddde;

border: solid 1px #980c10;

background: #d81b21;

background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');

}

.red:hover {

background: #b61318;

background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');

}

.red:active {

color: #de898c;

background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');

}

/* blue */

.blue {

color: #d9eef7;

border: solid 1px #0076a3;

background: #0095cd;

background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));

background: -moz-linear-gradient(top, #00adee, #0078a5);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');

}

.blue:hover {

background: #007ead;

background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));

background: -moz-linear-gradient(top, #0095cc, #00678e);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');

}

.blue:active {

color: #80bed6;

background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));

background: -moz-linear-gradient(top, #0078a5, #00adee);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');

}

/* rosy */

.rosy {

color: #fae7e9;

border: solid 1px #b73948;

background: #da5867;

background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');

}

.rosy:hover {

background: #ba4b58;

background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');

}

.rosy:active {

color: #dca4ab;

background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');

}

/* green */

.green {

color: #e8f0de;

border: solid 1px #538312;

background: #64991e;

background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));

background: -moz-linear-gradient(top, #7db72f, #4e7d0e);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');

}

.green:hover {

background: #538018;

background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));

background: -moz-linear-gradient(top, #6b9d28, #436b0c);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');

}

.green:active {

color: #a9c08c;

background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));

background: -moz-linear-gradient(top, #4e7d0e, #7db72f);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');

}

/* pink */

.pink {

color: #feeef5;

border: solid 1px #d2729e;

background: #f895c2;

background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');

}

.pink:hover {

background: #d57ea5;

background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');

}

.pink:active {

color: #f3c3d9;

background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');

}

CSS3 Gradient Buttons

by Web Designer Wall

Rectangle or

Rounded Can be

Medium or

Small

Button Tag

Span

Div

P Tag

H3

Gray

Rounded

Medium

Small

Button Tag

Span

Div

P Tag

H3

White

Rounded

Medium

Small

Button Tag

Span

Div

P Tag

H3

Orange

Rounded

Medium

Small

Button Tag

Span

Div

P Tag

H3

Red

Rounded

Medium

Small

Button Tag

Span

Div

P Tag

H3

Blue

Rounded

Medium

Small

Button Tag

Span

Div

P Tag

H3

Rosy

Rounded

Medium

Small

Button Tag

Span

Div

P Tag

H3

Green

Rounded

Medium

Small

Button Tag

Span

Div

P Tag

H3

Pink

Rounded

Medium

Small

Button Tag

Span

Div

P Tag

H3

e1795d681fb1a7f035f38b1637fee36f.gif

Demo:这个网址; http://www.webdesignerwall.com/demo/css-buttons.html

张忆樵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5任意形状按钮,CSS实现8种炫酷按钮
weixin_32285357的博客
06-03 2035
在各种UI组件库大行其道的今天，大家已经很少自己用CSS去实现一些效果了，久而久之CSS的水平也越来越退步，所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。1. 3D按钮1现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮(文中只列出各种实现的关键代码，完整代码请参考CodePen)。该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，...
HTML5 + CSS3 的常用 button 样式
魚將.NET
07-25 1005
效果图： 不多比比，代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Buttons</title> <style> /* ============================================================================= HTML5 disp.
近100款漂亮CSS3/HTML5按钮合集.rar
07-10
近100款漂亮CSS3/HTML5按钮合集，圆角，水晶按钮，红色的，黑色的，黄色的，各种颜色的，另外还都是圆角的按钮，用CSS3纯代码制作的菜单，无使用任何修饰性图片，想当八错。
8个时尚而简约的HTML5按钮
yazi1297的专栏
03-03 2868
转自:http://www.html5tricks.com/8-fasion-html5-buttons.html 按钮在网页交互中非常重要，本文主要分享一些外观时尚而又简约的HTML5按钮，有些按钮带有丰富的HTML5动画，有些按钮却有着清爽的外观，给人耳目一新的感觉，一起来看看吧。 1、基于Bootstrap的jQuery开关按钮组合 Bootstrap是一款由Twitt
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）(1)
最新发布
2301_78145364的博客
05-16 1490
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html5 按钮效果,7款外观迷人的HTML5/CSS3 3D按钮特效
weixin_36364044的博客
06-03 1605
本文作者html5tricks，转载请注明出处下面我整理了7款外观都十分迷人的1、CSS3超酷3D弹性按钮 按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮，比如5组可爱2、新款CSS3按钮组合 5组可爱CSS3按钮之前我分享过一些时尚的CSS3动画按钮，比如CSS3渲染Checkbox实现3D开关切换按钮、纯CSS3 3D按钮 按钮酷似牛奶般剔透等等。今天就再来分享一款可爱的CSS...
html5 实现按钮选择器,5款纯css3按钮样式
weixin_32205867的博客
06-03 397
这是一款非常实用的网页css按钮插件。在以前要做这种按钮鼠标滑过或按下的效果大多是使用css雪碧技术(即将多张图片合成一张，然后用css来控制图片的显示)。在这个css3按钮样式插件中，仅使用一个a标签，在使用css伪元素即可完成这项工作。HTML所有这些demo的html结构是相同的，仅需要一个a标签：Click me!第一个Demo：首先给它一些通用样式，需要指出的是position必须是re...
php漂亮按钮代码,使用css样式制作的漂亮按钮
weixin_39622628的博客
03-12 225
这篇文章主要介绍了关于使用css样式制作的漂亮按钮，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下css样式制作的按钮，很漂亮，值得收藏，在下文贴出具体的实现css，喜欢的朋友可以研究下Demo: CSS3 Buttonsbody {background: #ededed;width: 900px;margin: 30px auto;color: #999;}p {margin: 0...
css样式制作的漂亮按钮
12-13
【CSS样式制作漂亮按钮】 在网页设计中，创建吸引人的按钮是至关重要的，因为它能引导用户进行交互。这里我们将深入探讨如何使用CSS样式来制作漂亮的按钮。首先，我们需要理解CSS的基本概念，它是一种用于描述HTML...
用pyqt5 给按钮设置图标和css样式的方法
12-31
如下所示： 设置图标 ...设置css样式 self.pushButton.setStyleSheet(QPushButton{color:black} QPushButton:hover{color:red} QPushButton{background-color:lightgreen} QPushButton{border:2px}
HTML + CSS 光影按钮样式
05-25
本教程将专注于使用HTML和CSS创建具有光影效果的按钮样式。这种按钮不仅美观，还能提升用户体验，使得用户更易于感知和交互。 HTML（HyperText Markup Language）负责结构，而CSS（Cascading Style Sheets）则负责...
html5按钮自动特效,如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）...
weixin_29745609的博客
06-02 687
各式各样的按钮*{margin: 0;padding: 0;}.wrap{width: 600px;height: 400px;margin: 0 auto;/*background: pink;*/padding: 30px 50px;}/*div按钮*/.button5{width: 100px;height: 30px;float: left;/*position: absolute;*/t...
html中按钮的几种不同写法6,8个时尚而简约的HTML5按钮
weixin_42333009的博客
06-03 2229
按钮在网页交互中非常重要，本文主要分享一些外观时尚而又简约的HTML5按钮，有些按钮带有丰富的HTML5动画，有些按钮却有着清爽的外观，给人耳目一新的感觉，一起来看看吧。1、基于Bootstrap的jQuery开关按钮组合Bootstrap是一款由Twitter推出的开源前端开发包，功能非常强大。今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的，看了按钮的主题样式，也都...
很漂亮的按钮css样式（没有用到图片，可直接拷贝代码使用）
杨名天吓
08-29 1800
对于程序员，有时候也需要对页面风格做些改动，整体的页面风格还是美工的工作。 按钮其实是程序员很常用的，如果美工没有设计好，那就自己设计吧。 在网上发现有乐于奉献的人共享了代码。效果很好，而且没有使用到图片，这个很重要。 如果你使用别人的css，里面又用到了图片，那这个样式是没法使用的，除非，你能在网上下载使用到的图片，。 这个网址;  http://www.webdesig
从实战中学前端：html+css实现漂亮的按钮
weixin_34110749的博客
11-14 1790
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML5——按钮样式
Lazyinit的博客
06-06 4000
都有 https://wow.techbrood.com/fiddle/37189
利用HTML+CSS制作的按钮
LOXOI的博客
01-04 389
【代码】利用HTML+CSS制作的按钮。
「HTML+CSS」--自定义按钮样式【002】
海到无边天作岸 山登绝顶我为峰
03-29 2460
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 上面效果可以概括为： 鼠标未停
高效CSS代码模板：按钮样式集合
“CSS常用代码”是作者通过长时间实践积累的高效CSS样式，适用于Web界面的视图层开发。这些代码定义了不同样式的按钮，包括基本的按钮样式、蓝色按钮样式和红色按钮样式，注重字体设置、边框设计、背景图像以及鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值