半透明的按钮

HTML
标记为这个只需要一个HTML元素。在这种情况下，一个<a>元件。

<a class="semi-transparent-button" href="#">Button</a>

你可以在另一个HTML元素替代，如<button>或<input>。

CSS
该CSS属性的负责半透明的视觉效果是背景性。该背景属性分配的RGBA颜色值，这样我们就可以控制其不透明度。背景的颜色是白色的，用50％的不透明度。

.semi-transparent-button {
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8px;
  width: 80%;
  max-width: 200px;
  background: #fff; /* fallback color for old browsers */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.3s ease-out;
}

另外：
圆角与所取得的边界半径财产
文本对齐是用来居中按钮的标签（这是用户界面按钮的共同特征）
最大宽度设置为200像素所以按钮不会变得太宽的大屏幕
当用户通过所述的方式与该按钮交互的简单动画效果被触发过渡属性
此外，回退坚实的背景颜色使用十六进制颜色记号的浏览器无法呈现宣布 RGBA（）色值（例如Internet Explorer 8及以下）。

为了提高按钮的启示，我们需要设置一个指示样式规则为：悬停，：重点和：积极伪类。当用户悬停或激活按钮，我们为了过渡到固体彩色背景显示该按钮可以与接口。

.semi-transparent-button:hover,
.semi-transparent-button:focus,
.semi-transparent-button:active {
  background: #fff;
  color: #000;
  transition: all 0.5s ease-in;
}

一种技术用于增大半透明按钮的视觉重量是利用一个更有活力的背景颜色。不透明的白色是很中性的颜色，所以在演示中，你还可以找到一个半透明的蓝色按钮来替代使用。为半透明的蓝色背景的代码是：

background: rgba(30, 52, 142, 0.5);

另一种技术用于增加半透明的按钮的能见度是给他们一个纯色的边界。这可以很简单地通过给按 ​​钮来完成边境财产。

border: 1px solid #fff;

这的确是所有有给它。我希望以某种方式本教程是对你有用。

预览效果

源码下载

原文：http://sixrevisions.com/css/semi-transparent-buttons/

关注公众号『窗外天空』

获取更多建站运营运维新知！
互联网创业、前沿技术......