• 欢迎访问窗外天空网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 本站兼容IE9+,谷歌Chrome,火狐Firefox等主流浏览器

半透明的按钮

Wordpress nixon li 1,837次浏览 0个评论

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/


版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明半透明的按钮
喜欢 ( 0)
微信扫码
分享 (0)
关于作者:
咳...咳...
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址