比尔云BierYun--阿里云最新优惠活动
阿里云优惠码丨阿里云代金券

使用CSS创建简单的材质设计动作按钮

使用CSS创建简单的材质设计动作按钮

在材质设计中,浮动操作按钮用于在页面或视图上执行主要操作。通常它是圆形的,颜色鲜艳的,顾名思义,浮在视图上方以吸引用户注意。此外,它应该在焦点和点击事件时有某种动画,以给用户提供视觉反馈。

材料设计浮动操作按钮适用于移动应用程序,它也适用于Web应用程序,尤其是那些构建为移动响应的应用程序。

下面,您将学习使用CSS3和HTML5创建基本材质设计浮动操作按钮的超简单简单方法。

HTML

的HTML是一个简单的<div>元素,这将是该按钮。您也可以使用<button>元素代替<div>。在<div>内部,将添加文本或图标以传达按钮的操作。在此示例中,加号用于指示添加操作。class属性设置为“fab”类,它将<div>呈现为材质设计浮动操作按钮。有关CSS部分的更多信息。

CSS

CSS是所有魔术发生的地方。在“fab”类中,从第2行开始,我们执行了以下操作:

  • 设置div的高度和宽度(第3和第4行)
  • 将它染成鲜红色(第5行)
  • 通过将“border-radius”设置为50%(第6行)使其成为一个圆圈
  • 添加了一个方框阴影(第7行)以创建浮动效果。
  • 最后,添加了平滑动画的过渡。

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

接下来的3行(15-17)用于将按钮定位在视图的右下角。当应用固定位置时,该按钮将“粘住”该位置。

最后,从第20行开始,我们有fab类和hover选择器。当用户将鼠标悬停在按钮上时,框阴影会稍微扩大,按钮的大小会增加,从而产生上升效果。

未经允许不得转载:阿里云代金券 » 使用CSS创建简单的材质设计动作按钮

评论 抢沙发

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

强烈推荐

高性能SSD云服务器ECS抗攻击,高可用云数据库RDS