css3漂亮的按钮

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title></title>
</head>
<body>
	<div class="jc-btn">button</div>
	<div class="jc-btn jc-btn-success">button</div>
	<div class="jc-btn jc-btn-info">button</div>
	<div class="jc-btn jc-btn-primary">button</div>
	<div class="jc-btn jc-btn-danger">button</div>
	<div class="jc-btn jc-btn-danger jc-btn-bg">按钮</div>
<style type="text/css">
.jc-btn{
	display: inline-block;
	border: 0;
	color: #fff;
	outline: none;
	cursor:pointer;
	margin:10px 5px;
	padding: 8px 20px;
	border-radius: 3px;
	text-align: center;
	text-shadow:1px 1px 0 #666;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
	background-image:linear-gradient(#bbb, #eee);
	background-image:-o-linear-gradient(#bbb, #eee);
	background-image:-ms-linear-gradient(#bbb, #eee);
	background-image:-moz-linear-gradient(#bbb, #eee);
	background-image:-webkit-linear-gradient(#bbb, #eee);
	box-shadow:0px 5px 10px rgba(30,30,30,.3);

}

.jc-btn:active{
	box-shadow:0px 0px 0px rgba(30,30,30,.3);
}

.jc-btn-success{
	background-image:linear-gradient(#37942B, #51D93F);
	background-image:-o-linear-gradient(#37942B, #51D93F);
	background-image:-ms-linear-gradient(#37942B, #51D93F);
	background-image:-moz-linear-gradient(#3EA630, #51D93F);
	background-image:-webkit-linear-gradient(#3EA630, #51D93F);
}

.jc-btn-info{
	color: #fff;
	background-image:linear-gradient(#3EAEB0, #53E8EB);
	background-image:-o-linear-gradient(#3EAEB0, #53E8EB);
	background-image:-ms-linear-gradient(#3EAEB0, #53E8EB);
	background-image:-moz-linear-gradient(#3EAEB0, #53E8EB);
	background-image:-webkit-linear-gradient(#3EAEB0, #53E8EB);
}

.jc-btn-primary{
	color: #fff;
	background-image:linear-gradient(#3176B8, #44A3FC);
	background-image:-o-linear-gradient(#3176B8, #44A3FC);
	background-image:-ms-linear-gradient(#3176B8, #44A3FC);
	background-image:-moz-linear-gradient(#3176B8, #44A3FC);
	background-image:-webkit-linear-gradient(#3176B8, #44A3FC);
}

.jc-btn-danger{
	color: #fff;
	background-image:linear-gradient(#B2392E, #F74F40);
	background-image:-o-linear-gradient(#B2392E, #F74F40);
	background-image:-ms-linear-gradient(#B2392E, #F74F40);
	background-image:-moz-linear-gradient(#B2392E, #F74F40);
	background-image:-webkit-linear-gradient(#B2392E, #F74F40);
}

.jc-btn-bg{
	padding: 16px 44px;
}
</style>
</body>
</html>
时间: 2024-11-06 17:34:59

css3漂亮的按钮的相关文章

Button UI Kit CSS3漂亮Button按钮

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Button UI Kit</title> <style type="text/css"> body{ background: #35393d; } .controls_ui{ width: 300px; margin:

使用CSS3制作漂亮的按钮

我给大家介绍一下如何使用CSS3来制作一个圆角阴影.渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,span,p,a,button,input等等. 这些纯CSS代码制作的按钮大小可以根据字体大小自动调整,渐变色背景可以兼容各浏览器,并且有正常.鼠标滑向.点击三种状态样式,当然,如果您的浏览器不支持CSS3,那么按钮将没有圆角和阴影效果. 教程地址:http://www.helloweba.com/v

一款基于jquery漂亮的按钮

之前为大家分享了好多css3实现的按钮.今天给大家分享一款基于jquery漂亮的按钮.这款按钮背景下用了一张图片.当鼠标经过的时候背景用半透明div遮住.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <a class="btn" data-js="btn"><span class="btn-inr"><span class="txt-a">See This Butt

9款精美别致的CSS3菜单和按钮

1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都很漂亮.今天我们要再分享一款更酷的CSS3 3D立体菜单,这款菜单侧躺在页面上,每个菜单项都有不错的小图标. 在线演示 源码下载 2.纯CSS3立体动画菜单 菜单项按下有内阴影 这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,

CSS3 3D分页按钮样式

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>石家庄礼品公司</title><style>.ui-page{border: 0px;background: #37578C;background: -webkit-linear-gradient(#37578C, #608BAE);background: -moz-linear-grad

[CSS3] 动画暗角按钮

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ position:relative; text-align: center; background:#212322; } h1{ color:#1A897A; font-family: &q

一款基于css3的动画按钮

之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="share-buttons"> <div class="share-button"> <div class="share-button-secondary"> <div class="share-butt

jQuery和CSS3炫酷按钮点击波特效

这是一款效果非常炫酷的jQuery和CSS3炫酷按钮点击波特效.该特效当用户在菜单按钮上点击的时候,从鼠标点击的点开始,会有一道光波以改点为原点向外辐射的动画效果,非常绚丽. 在线演示:http://www.htmleaf.com/Demo/201503151527.html 下载地址:http://www.htmleaf.com/jQuery/Buttons-Icons/201503151526.html

css3制作一个漂亮的按钮

特点: 1.圆角边框 border-radius 2.文字有背景  text-shadow 3.按钮有阴影  box-shadow 4.文字有向上的阴影  text-shadow 5.按钮背景色有个从上往下的渐变效果  linear-gradient 6.点击后明显有个下按效果 <!DOCTYPE html><html>   <head>    <link rel="stylesheet" href="style.css"&