button

CSS3 Pictogram Button

CSS3  Pictogram Button

Buttons的制作,现在几乎无需任何图片就可以实现(当然需要忽略IE低版本),而且我现在做的项目,按钮基本上使用CSS3来制作,让那些不支持CSS3的浏览器就用纯色显示,让现代浏览器给用户带来更好的体验。至于Buttons的制作,在W3cplus上也是有很多案例了,今天我再次老调重弹,制作了Icon的button,而且制作了三种形态,3D立体按钮,内描边按钮,圆角按钮,而且配置了多个颜色,希望这些按钮能让你直接用到你的项目中(w3cplus的案例效果,已经有很多网站在直接使用(^_^))。

Pure CSS3 Create Luminous Button

Pure CSS3 Create Luminous Button

这是一个很简单的按钮效果,其来源于鬼哥的鬼群,看到鬼大问这样的按钮怎么制作,默认效果就不说了,说一下点击时的效果吧。当你点击按钮时,中间会有发光,并向外扩散的淡光效果。看到效果大家在考虑是否使用text-shadow制作,或者说使用box-shadow效果制作。但思量过来,直接在button上使用这两个属性都无法实现,最后决定使用“:after”来制作发光的效果。经过尝试,效果还是制作出来了,只不过没有设计师的那么完美。希望大家能从中找到一点思路。

藤藤每日一练——Pure CSS3 3D Buttons

Pure CSS3 3D Buttons

今天的案例是个老案例,使用CSS3代码来制作3D按钮效果,w3cplus有关于buttons的介绍已经很多,如果你没有看过,不仿点击这里。今天藤藤给大家带来的还是一个系列的3D按钮制作效果,制作方法是老套(万变不离其中),但其中色彩的调各让我很折服,因为很多效果在ps中制作是容易,特别对于设计师来说更容易,但对于一名coder来说,还是有点困难,具体请看制作的代码,让代码来展现所有的一切。我想您和我一样会为这样的效果折服,至少我已膜拜藤藤以css3的了解,以及其对制作过程中的细节的追求。

藤藤每日一练——Social Media Buttons

Social Media Buttons

这个案例是使用CSS3制作的一个媒体分享圆形按钮。效果看起来很简单,其实制作也非常的简单的,主要就是径向渐变的运用,以及@font-face实现的ICON效果,当然其中也离开不其他属性的点缀效果,比如说box-shadow制作的阴影,transition制作的动画效果等。

藤藤每日一练——CSS3制作导航菜单与分享按钮

藤藤每日一练——CSS3制作导航菜单与分享按钮

这个案例制作了两个效果,一个是CSS制作的导航效果,这个导航效果配一点js代码实现active状态下改变当前项的效果(从文字转变为icon),导航其他效果都是使用css3的常用属性制作的,具体什么属性我就不多说了,大家一看就知道。第二种效果使用纯css3制作了一个twitter的分享按钮,而且这个按钮还带有Tip的提示效果,详细的请看下面的实现代码:

藤藤每日一练——Get The App Button

藤藤每日一练——Get The App Button

今天这个案例是使用CSS3制作了四个不同的App下载按钮。这个效果中主要使用了gradient制作渐变按钮效果,配合@font-face制作向右的箭头效果,同时使用box-shadow制作阴影效果,而且使用了:nth-child选择器来控制不同按钮的效果。详细的请看具体代码。

藤藤每日一练——CSS3 Button UI Kit

藤藤每日一练——CSS3 Button UI Kit

这个案例是将Button UI Kit的设计图转换成CSS3的DEMO,效果简单,制作的方法也相对简单,说名实话用来用去的属性也就是那么几个,渐变gradient 、阴影text-shadow和box-shadow、还有就是字体icon的制作@font-face。但话说回来,属性简单,制作方法简单,但对渐变色的配置,阴影效果的拿捏还是要一定的技术,不信,你试试,反正我是信了。(^_^)

藤藤每日一练——CSS3 Button Pink

藤藤每日一练——CSS3 Button Pink

今天这个案例是使用CSS3的常用属性制作的一个ICON圆开按钮效果,在这个案例中使用@font-face属性制作了三个浏览器的icon(chrom/firefox/ie),使用gradient制作的径向渐变效果,并且使用box-shadow实现立体效果,用text-shadow制作的icon发光效果,详细的可以看代码。

藤藤每日一练——36 Web Buttons Collection

藤藤每日一练——36 Web Buttons Collection

今天这个案例不单单是一个CSS3的练习案例,他还是一个按钮库,在这个基础上你可以演变更多的按钮效果。说得在大一点,这个案例还能让你了解如何组织你的CSS代码。当然这个案例中的效果制作的非常的细腻,藤藤花了很多心思,正如她所说,在制作这些按钮时,学到很多新的东西,CSS3的属性运用就不多说了,还学到了如何组织代码,如何供用共性的东西等等,如果你感兴趣不仿跟藤藤一起做一下这个案例,我想你会有所收获的。

藤藤每日一练——CSS3 Chunky Button Pack

藤藤每日一练——CSS3 Chunky Button Pack

这是一个CSS3使用gradient、box-shadow制作的按钮集合,在w3cplus有关于按钮方面的实例不少,随便搜索css3 button就会有大把相关介绍。今天老调重谈,还是使用按钮的制作,不过这里想给大家呈现的一种思想是,只要你敢想,就有实现的方法,在这里一共展示了15种不同颜色的按钮,而且在":hover"和“:active”下都有不同的效果。制作方法是一样,但配色,特别是gradient实现渐变色还是需要一定的功底的,不信你就试试吧,我可是信了,因为我也做不到。(^_^)

页面

返回顶部