用CSS创建一个简单的Material Design动作按钮2017年5月26日2017年6月15日在材料设计中，浮动

在材料设计中，浮动动作按钮被用来执行页面或视图上的主要动作。一般来说，它是圆形的，颜色鲜艳，就像它的名字一样，漂浮在视图之上以吸引用户的注意力。此外，它应该在聚焦和点击事件中具有某种动画，以给用户提供视觉反馈。

物质设计的浮动按钮在移动应用程序中非常有效，对于网页应用程序也很有效，特别是那些建立在移动响应上的应用程序。

下面，你将学习一个超级简单的方法，用CSS3和HTML5创建一个基本的材质设计浮动动作按钮。

这个HTML是一个简单的

元素，它将是一个按钮。你也可以用一个元素来代替

。在

里面将添加一个文本或图标来表达按钮的动作。在这个例子中，一个加号被用来表示一个添加动作。类属性被设置为 "fab "类，这将使

成为一个材料设计的浮动动作按钮。更多信息请参见CSS部分。

.fab {

width: 70px;

高度: 70px;

背景颜色：红色。

border-radius: 50%;

box-shadow: 0 6px 10px 0 #666;

过渡: all 0.1s easy-in-out;

字体大小: 50px;

color: white;

text-align: center;

line-height: 70px;

position: fixed;

右边： 50px。

底部： 50px。

}

.fab:hover {

box-shadow: 0 6px 14px 0 #666;

transform: scale(1.05);

}

CSS是所有魔法发生的地方。在 "fab "类里面，从第2行开始，我们做了以下工作。

第10-13行设置了按钮内的文本属性。

接下来的3行（15-17）是用来将按钮定位在视图的右下角。由于应用了一个固定的位置，按钮将 "粘 "在这个位置上。

最后，从第20行开始，我们有一个带有悬停选择器的fab类。当用户将鼠标悬停在按钮上时，盒子的阴影会略微扩大，按钮的大小也会增加，产生一种上升的效果。

这就是它。在下面的现场演示中试试吧。