（收藏）漂亮的css button样式汇总

最新推荐文章于 2024-06-24 10:48:58 发布

程序员的生活1

最新推荐文章于 2024-06-24 10:48:58 发布

阅读量8.1k

点赞数 2

分类专栏： js web前端 html+css 文章标签： vue.js css javascript html html5

本文链接：https://blog.csdn.net/lin123_00/article/details/105777913

版权

这篇博客汇集了一系列无需图片、仅用CSS实现的精美button样式，适用于各种网页设计需求。开发者可以直接复制代码到本地预览效果。源码中使用了a、input、span、div、p、h3等不同HTML标签来创建按钮，提供了多样化选择。

摘要由CSDN通过智能技术生成

在网页设计过程中，程序员们常常需要配合美工来设计页面的美观效果，当然大部分页面风格都是美工的工作。但是按钮button样式，是我们程序员最常用的。
下面我们就给大家介绍一些好看的button样式，大家可以直接复制代码在本地查看效果。这里的button样式没有使用任何图片，可以直接复制代码就可以了！

——各位小伙伴在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料笔记视频，包括HTML/CSS/javaScript/Vue等多个web前端基础知识点进阶干货需要的可以免费分享给大家，有需要者请进群点击进入1045267283

——注：源码里面使用了多种html标签做成按钮，有a，input，span，div，p，h3。总有适合你的标签

button样式源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo: CSS3 Buttons</title>
<style type="text/css">
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(#7575

最低0.47元/天解锁文章

程序员的生活1

关注

2
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
（收藏）漂亮的css button样式汇总

在网页设计过程中，程序员们常常需要配合美工来设计页面的美观效果，当然大部分页面风格都是美工的工作。但是按钮button样式，是我们程序员最常用的。下面我们就给大家介绍一些好看的button样式，大家可以直接复制代码在本地查看效果。这里的button样式没有使用任何图片，可以直接复制代码就可以了！——各位小伙伴在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提...
复制链接

扫一扫

专栏目录