关闭

纯CSS Material Design风格按钮

时间: 2019-04-29阅读: 886标签: 设计

其实Material Design的扁平化icon按钮,这类型的按钮往往只利用几何色块的变化,就能抓住使用者的眼光,并且从几何形状中明白按钮的含意,这也是Material Design非常强调的设计理念和精髓。

技术图片


应用重点与原理

在这篇我纯粹利用css,就做出了Material Design风格的按钮,其实没有很难,比较需要知道的重点如下:

  • 伪元素before和after的应用

伪元素在里头扮演相当重要的角色,利用伪元素我们可以产生两个不在html里头的类div,可以大幅降低代码的复杂程度。

  • div的自身宽度与边框

由于我们要进行三角形与矩形之间的形变,虽然三角形可由边框产生,但却无法做出漂亮的形变效果(用背景色的话就会有淡入淡出的现象),所以必须要用边框宽度和矩形大小去搭配,当边框变细的时候,矩形变大,如此一来就可以做出三角形与矩形互相变换的效果啰,下图的红色是纯粹用颜色变换,蓝色则是用边框宽度与div宽度变换,效果应该很明显吧!

技术图片

  • transform的应用

css里所有的形变都是藉由transform来完成(必要时请加各个浏览器的前坠字),示例里头会用到scale与rotate这两个变形属性。


实现Material Design风格按钮

了解原理之后,先来看一下html代码,代码里面有两个主要的div分别是a和b,a的话是利用伪元素来进行变换,b的内容还有三个小i分别是b1、b2和b3(都会宣告为block属性),因为大于两个就无法纯粹使用伪元素,所以直接用三个block元素来表示比较快。

<div></div>
<div>
  <i></i>
  <i></i>
  <i></i>
</div>

接下来就是CSS了,先看到a,首先当然是先画两条垂直的矩形,做出暂停的icon,这里直接利用伪元素来画,比较特别的是「高度为0」,因为在上面有说过,为了要塑造一个「形状的变换」,而不是「颜色的淡入淡出」,所以必须用border-width来代替高度(记得加上transition的渐变时间)。

.a{
  position:absolute;
  top:50px;
  left:50px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:#363;
  transition:.2s;
}
.a:before,.a:after{
  content:"";
  position:absolute;
  width:12px;
  height:0;
  top:24px;
  border-style:solid;
  border-width:0 0 54px 0;
}
.a:before{
  left:27px;
  border-color:#fff rgba(255,255,255,0) #fff rgba(255,255,255,0);
  transition:.2s;
}
.a:after{
  left:54px;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) #fff #fff ;
  transition:.2s;
}

主体设定好之后,接着就要来设定hover和active的效果,这里就会用transform的scale和rotate,除了变形,仔细看一下,宽度和border宽度都改变了,加上位置的互相搭配,就可以很容易地做出两个矩形在鼠标移上去的时候变成三角形,点下去的时候变成正方形啰!(scale如果设定两个值,分别就是宽与长的变形比例)

.a:hover:before{
  top:26px;
  left:45px;
  width:0;
  transform:scale(2,1.17) rotate(90deg);
  border-width:0 0 24px 24px; 
}
.a:hover:after{
  top:53px;
  left:45px;
  width:0;
  transform:scale(2,1.17) rotate(90deg);
  border-width:0 24px 24px 0; 
}
.a:hover{
  background:#095;
  transition:.4s;
}
.a:active:before{
  border-width:0 0 24px 0;
  width:22px;
  top:26px;
  left:38px;
  transition:.4s;
}
.a:active:after{
  border-width:0 0 24px 0;
  width:22px;
  top:50px;
  left:38px;
  transition:.4s;
}
.a:active{
  transform:rotate(180deg);
  background:#0a9;
}

完成的效果就是长这样。

技术图片

接着是另外一个,原理基本上大同小异,然而不需要做形状变换反而简单许多,只需要调整角度和长宽就好啰!

.b{
  position:absolute;
  top:50px;
  left:160px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:#09c;
  transition:.2s;
}
.b i{
  position:absolute;
  display:block;
  width:56px;
  height:10px;
  background:#fff;
  left:22px;
  border-radius:2px;
  transition:.2s;
}
.b1{
  top:24px;
}
.b2{
  top:44px;
}
.b3{
  top:64px;
}
.b:hover .b1{
  left:15px;
  width:70px;
  transform:translateY(20px) rotate(45deg);
}
.b:hover .b3{
  left:15px;
  width:70px;
  transform:translateY(-20px) rotate(-45deg);
}
.b:hover .b2{
  left:50px;
  width:0;
}
.b:hover{
  background:#c00;
}
.b:active .b1{
  width:40px;
  transform:translateY(11px) rotate(-45deg);
  transition:.3s;
}
.b:active .b3{
  width:40px;
  transform:translateY(-7px) rotate(45deg);
  transition:.3s;
}
.b:active .b2{
  top:46px;
  left:22px;
  width:60px;
  transition:.3s;
}
.b:active{
  transform:rotate(45deg);
  background:#f70;
}

完成的效果长这样。

技术图片

以上就是纯粹利用CSS做出来的Material Design风格按钮,相信熟练之后就可以做出更多不错的应用!


原文地址:https://blog.51cto.com/14284898/2386353  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/3118

设计师常用的几个资源网站分享

如果你是一名设计师,你的电脑上可能存储了很多的设计网站,但是对于一些新手小白来说,刚接触设计的时候应该怎样进行绘制呢?难道要自己去一笔一笔的进行绘制吗?下面给大家分享几个设计网站

设计原则之依赖倒置js

高层模块不应该依赖低层模块,二者都应该依赖其抽象;抽象不应该依赖细节;细节应该依赖抽象。什么叫高层模块,什么叫底层模块,什么叫抽象,什么叫细节

Pichai 谈 Google 的设计发展

让技术为全世界的每一个人服务,这是我的激情所在。不仅是 Google,众多小团队和开发者同样可以设计出优秀的产品并帮助人们解决问题;这是我们的共同目标。

网站导航的设计细节

在快速建站中,每一个细微的方面都会影响网站的优化效果。因此,在做营销网站时,有必要充分考虑并优化每个细节。今天,我们将与您分享一个在实践中容易被忽略且非常重要的细节,即网站导航的设计。

前端程序员要懂的 UI 设计知识

在本文中,我们介绍了七个主要的设计基础:留白,颜色,对比,比例,对齐方式,版式和视觉层次。它们对于 UI 都同样重要——如果缺少这些元素中的任何一个,都会损害整个用户体验。

专业Web设计师应该避免的6个关键错误

互联网的诞生彻底改变了世界。以前习惯于在电视和报纸广告上一掷千金的企业开始渐渐意识到互联网带来的变化。他们不得不改变他们的投资方向,把他们的钱投向更有潜力,更能为客户带来利润的地方

前端如何和设计师成为好朋友?

分享一些和设计师成为好朋友的个人经验,注意,这些经验技巧只适用于技术开发人员。如果有事情找设计师商量,千万不要站在设计师的背后

网站设计如何提高用户营销转化率?

用户获取是确定网站成功的核心指标,没有活跃的用户会花费大量资金投入,在获得用户之后,网参与和保留是两个指标,可真实地洞察网站的成功,较低的网站参与度和保留率是导致网站失败的一个因素,而高度参与和保留则相反

浅析网页首页界面设计

开宗明义,无论是对于一篇文章、一场会议或一部专题片,还是对于一个网站来说,都是必不可少的。那么能为一个网站开宗明义的地方(标签)就是 Title(标题)和Description(描述、副标题),而能够为Title和Description提供进一步诠释的就是网站的首页

新手Web设计师应该避免的 6 宗罪

新手Web设计师和开发人员往往以有缺陷的创作而告终,却不知道真正的故障出自于哪里。虽说有这么多的设计书籍,但即使都读了,也不会对最后的设计有任何意义。在第一个原型中创建一个无缝的设计真的是一个挑战——事实上,只是做好单个部分就是一个难点。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!