欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > 程序代码 > css实现圆角button样式代码小教程
这篇文章主要为大家详细介绍了css实现圆角button样式代码小教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

我们在做网站的时候经常会遇到需要做按钮button,很多站长比较烦恼button的样式效果,比较默认的button样子太难看了,很不符合现在的网站的普遍审美。

下面我们来看几个效果,如下图:

css实现圆角button样式代码小教程1

这几个效果的HTML代码很简单如下:

<a href="#" class="button green">button</a>
<a href="#" class="button blue">button</a>
<a href="#" class="button gray">button</a>

当然了,如果没有 CSS ,那么上面的 HTML 执行起来是这样的:

css实现圆角button样式代码小教程2

下面就跟着361模板来写CSS实现圆角button样式效果

.button {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 12px/25px Arial, sans-serif;
}
一些不同颜色的按钮样式:
.green {
color: #3e5706;
background: #a5cd4e;
}
/* Blue Color */
.blue {
color: #19667d;
background: #70c9e3;
}
/* Gray Color */
.gray {
color: #515151;
background: #d3d3d3;
}

到这里我们来看下按钮是什么样了:

css实现圆角button样式代码小教程3

按钮的背景和基本样式已经出来了,唯一不完美的就是没有圆角,下面接下来开始用 CSS 处理圆角:

.button {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 12px/25px Arial, sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255, .22);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
transition: all 0.15s ease;
}

现在我们再来看下按钮效果:

css实现圆角button样式代码小教程4

这样就基本实现了圆角button的目标了,但是细心的朋友可能会发现,这个还是不够完美的,为什么呢?

因为上面的圆角button没有立体效果,下面我们就接着来完善:

/* Green Color */
.green {
color: #3e5706;
background: #a5cd4e; /* Old browsers */
background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
/* Blue Color */
.blue {
color: #19667d;
background: #70c9e3; /* Old browsers */
background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}
/* Gray Color */
.gray {
color: #515151;
background: #d3d3d3; /* Old browsers */
background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

现在再看下

css实现圆角button样式代码小教程5

是不是基本完美了?很漂亮吧,为了让大家更多的选用这样 的样式效果,361模板网给大家再做个更大一点的按钮,我们来增加了个 big 样式:

html代码如下:

<a href="#" class="button big green">sign in <span>One minute</span></a>
<a href="#" class="button big blue">sign in <span>One minute</span></a>
<a href="#" class="button big gray">sign in <span>One minute</span></a>

CSS代码如下:

/* Big Button Style */
.big {
padding: 0 40px;
padding-top: 10px;
height: 45px;
text-transform: uppercase;
font: bold 20px/22px Arial, sans-serif;
}
.big span {
display: block;
text-transform: none;
font: italic normal 12px/18px Georgia, sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

大按钮的效果:

css实现圆角button样式代码小教程6

最后,我们还有一道工序没有完成,那就是 当鼠标移到按钮上方时显示不同的效果

CSS效果代码如下:

.button:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}
.button:active {
-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}

完成,去看看效果吧。

以上就是css实现圆角button样式代码小教程的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css css圆角 button圆角

上一篇php报错:Allowed memory size of 134217728 bytes exhausted解决方法

下一篇css伪元素before和after的使用教程

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在