卡卡网

本文将介绍一款CSS实现的彩色按钮边。

demodownload

实例介绍

纯CSS实现，按钮边框为彩色线条。

HTML代码

<button class="btn">Button</button>

非常简单，HTML代码是一个button标签，它的class值为btn。

CSS代码

.btn{
  padding:30px 30px;
  font-size:50px;
  font-weight:700;
  font-family:"Open+Sans";
  color:#fff !important;
  border-radius:7px;
  text-transform:uppercase;
  border-width:0;
  background:linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  position:relative;
}
.btn:after{
  top:2px;
  left:2px;
  right:2px;
  bottom:2px;
  border-radius:7px;
  position:absolute;
  content:"Button";
  background:#111;
  padding-top:10%;
}

CSS代码设计思路是，把按钮边框宽度设为0，border-width:0;，使用背景渐变属性：background:linear-gradient()，然后使用:after伪元素设置按钮内容content:"Button";，以及按钮背景颜色background:#111;，调整位置。

按钮上的文字“button”是在CSS伪元素:after里设置，content:"Button";，而不是在html代码里写。

总结

本文介绍的实例很简单，通过该实例，我们可以学习伪元素:after的使用，如果你也喜欢这个按钮样式，那么可以直接下载源码使用。

相关文章

• CSS实现的拖拽式确认按钮【演示/源码下载】
• CSS3实现的发光动画按钮(有光随鼠标移动的悬停效果)
• 纯CSS3实现的保存(save)、下载(download)按钮4种样式
• 纯CSS：鼠标移上后，链接按钮颜色显示渐变效果
• 4款CSS 3D按钮点击过渡效果
• 6个CSS按钮边框过渡动画效果
• 简单又好看的CSS单选按钮(radio)样式
• 30个漂亮的CSS渐变按钮，鼠标滑过(hover)动画效果

• CSS3颜色渐变按钮 鼠标划过变色
• 【8个实例】纯CSS按钮(button)，简单漂亮实用
• CSS悬停效果按钮一简单实例（鼠标移到按钮上变成其他颜色）
• 很好看的css3动画按钮鼠标悬停效果【2个实例】
• 漂亮悬停效果的CSS3动画按钮【5个实例代码】
• 漂亮的伪元素CSS按钮5个实例代码
• 20个纯CSS3实现的彩色透明水晶按钮

标签: border  button  按钮