您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

纯CSS 精美按钮UI设计、实现及实例

时间:2020-07-09 11:27:46  来源:  作者:

前文中我们对css超炫加载动画设计、实现与实例进行了讲解与说明,通过学习可知使用CSS提供的animation属性及伪元素等可以实现精美的CSS动画效果的设计与开发。本文我们将继续介绍CSS在Web页面元素设计中的应用。

纯CSS 精美按钮UI设计、实现及实例

纯CSS实现开关元素设计


按钮开关设计要求及效果

本例我们使用CSS完成开关的设计,主要要求是在点击开关时开关标识颜色需要改变,另外需要体现出元素点击前与点击后的动态变化与立体效果。本例最终设计呈现效果描述如下图所示:

纯CSS 精美按钮UI设计、实现及实例

开关按钮实现效果展示


设计思路与语法说明

要实现如上图所示的开关按钮效果,需要针对元素改变鼠标点击前后的CSS样式,因为只使用CSS实现,我们选择本身具有点击属性的INPUT元素。因此还需要考虑对INPUT元素外观进行设置,其设置也主要是依托于CSS选择器及相关属性的设置。

纯CSS 精美按钮UI设计、实现及实例

CSS选择器及属性设置

另一方面本例中出现的开关标志,主要使用第三方字体库提供的图标实现,因此需要对font相关属性及CSS外部link方法有所学习掌握。本例所使用字体如下所示:

纯CSS 精美按钮UI设计、实现及实例

字体图标

在明确基本思路之后,我们可以使用submine进行代码编写,主要编写步骤如下:

1、链接字体样式

本例使用如上图所示提供的on图标,即Font Awesome图标字体库和CSS框架,因此需要外部链接或者下载相应CSS文件,这里我们选择外部链接,通过使用CSS提供的link,实现代码如下:

纯CSS 精美按钮UI设计、实现及实例

字体链接

链接完成之后我们在设置字体时可直接使用FontAwesome字体,其中on图标对应的编码为f011。

2、定义页面内容

本例页面内容主要使用input元素checkbox属性进行按钮设置。因此页面内容部分定义如下所示:

纯CSS 精美按钮UI设计、实现及实例

页面主体部分

3、定义checkbox样式

在完成页面元素添加之后就需要对页面元素进行CSS样式的设置,本例通过元素加type属性作为选择器,选择指定元素并进行样式设置。代码如下:

纯CSS 精美按钮UI设计、实现及实例

checkbox属性设置

checkbox属性设置描述如上图所示,设置效果如下:

纯CSS 精美按钮UI设计、实现及实例

checkbox属性效果

4、input添加checked、after等样式

为进一步实现点击效果切换及图标按钮的效果,需要对check状态及after伪元素进行CSS样式的设置。其中after为元素主要用于在上图中添加on开关图标。实现代码描述如下:

纯CSS 精美按钮UI设计、实现及实例

after伪元素选择器及样式设置

after伪元素选择器及样式设置如上图所示,主要完成content内容即on图标设置,字体选择、字体颜色及字体大小设置,设置完成预览效果如下:

纯CSS 精美按钮UI设计、实现及实例

after为元素设置效果

要实现点击效果就需要在点击之后对input元素样式进行设置,因此我们使用checked作为选择器对该状态下input样式进行设置。设置代码如下所示:

纯CSS 精美按钮UI设计、实现及实例

checked状态CSS设置

checked状态CSS设置如上图所示,我们只对box-shadow阴影进行设置,通过阴影变化实现按钮动态效果。

5、点击之后on图标颜色变化

点击之后on图标颜色变化主要通过对input[type="checkbox"]:checked,进一步使用after伪元素定义字体颜色实现。实现代码如下所示:

纯CSS 精美按钮UI设计、实现及实例

on图标(字体)颜色改变

通过使用该选择器,会在input点击之后,on字体颜色变为红色。以上给出了input按钮效果实现的基本思路与部分核心实现代码。如需完整案例代码请关注并私信作者。


本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可在评论区回复。更多程序设计相关教程及实例分享,期待大家关注与阅读!



Tags:CSS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  Tags: CSS  点击:(9)  评论:(0)  加入收藏
其实文章原名叫做 “碰到不支持 flex 的项目怎么办?”现在差不多已经是 flex 的天下了,简单灵活,但有时还是不可避免地会接触到 IE 浏览器,比如我最近接触的 阅文作家专区 (qq....【详细内容】
2021-06-17  Tags: CSS  点击:(157)  评论:(0)  加入收藏
在 mac 文件管理中有这样一个小细节。 当文件名不超过一行时,完整显示,此时鼠标放上去无任何提示 当文件名超过一行时,出现省略号,此时鼠标放上去提示显示完整文件名 一个很微...【详细内容】
2021-05-25  Tags: CSS  点击:(186)  评论:(0)  加入收藏
多行文本展开收起是一个很常见的交互, 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当...【详细内容】
2021-05-21  Tags: CSS  点击:(183)  评论:(0)  加入收藏
前言在写过一段时间 CSS 之后,大家对于常见的属性应该都很熟悉,例如最基本的 display、position、padding、margin、border、background 等等,在写 CSS 的时候不需要特别查什...【详细内容】
2021-04-27  Tags: CSS  点击:(258)  评论:(0)  加入收藏
在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进...【详细内容】
2020-11-11  Tags: CSS  点击:(80)  评论:(0)  加入收藏
简介CSS 包含了许多函数,而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来,这让我们的开发更加轻松,也减少了对JavaScript的依赖。CSS 函...【详细内容】
2020-09-07  Tags: CSS  点击:(74)  评论:(0)  加入收藏
当我们非常专注写代码时候,我们往往会无意识的写出一些无效CSS代码。 我把这种称为 “潜意识错误”。 导致这种错误后,我们经常会反问自己:“为什么我写出这样低级错误?” 不过,...【详细内容】
2020-08-26  Tags: CSS  点击:(71)  评论:(0)  加入收藏
这是Chrome浏览器中的一个新的实验性功能!现在,我们可以了解一个网站上使用的CSS的概况,从颜色的数量到未使用的声明数量......甚至是定义的媒体查询的总数。同样,这是一个实验...【详细内容】
2020-07-21  Tags: CSS  点击:(94)  评论:(0)  加入收藏
前文中我们对CSS超炫加载动画设计、实现与实例进行了讲解与说明,通过学习可知使用CSS提供的animation属性及伪元素等可以实现精美的CSS动画效果的设计与开发。本文我们将继续...【详细内容】
2020-07-09  Tags: CSS  点击:(56)  评论:(0)  加入收藏
▌简易百科推荐
Chrome 正在试验 CSS @container 查询器功能,这是由 Oddbird 的 Miriam Suzanne 和一群网络平台开发者支持的 CSS 工作组 Containment Level 3 规范。@container 查询器使我...【详细内容】
2021-12-23  前端晚间课    Tags: CSS   点击:(8)  评论:(0)  加入收藏
CSS选择器很强大下面是我在工作中使用最多的一些选择器:相邻元素, 英文称为sibling, 也就是兄弟姐妹的意思.其实很形象, 比喻两个dom是相邻的.但是邻居很多, 紧密相邻的, 还...【详细内容】
2021-12-23  不只是个小前端    Tags:CSS选择器   点击:(6)  评论:(0)  加入收藏
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  前端晚间课    Tags:CSS   点击:(9)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  粤嵌教育    Tags:v   点击:(15)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Nodejs开发    Tags:CSS   点击:(45)  评论:(0)  加入收藏
<template> <div> <div class="triangle"></div> </div></template><style scoped> .triangle { width: 0; height: 0; border-width: 20px; border-styl...【详细内容】
2021-11-04  荣邦小伙917    Tags:css   点击:(40)  评论:(0)  加入收藏
一提起图标,大家可能第一个会想到PS、美工等词语,但很多小图标现在根本都不需要再打开PS了。1、常见的括号( 前进或后退“>” ).arrow{ width:12rpx; height:12rpx; border-...【详细内容】
2021-10-12  滇東小贰锅    Tags:css   点击:(55)  评论:(0)  加入收藏
在过去的几年里,Web开发已经变得非常流行。每年都会发布许多前端框架,Bootstrap一直是最受欢迎的一个,但是,还有许多其他的框架,你可能没有听说过,但绝对值得一试。想学的同学可以...【详细内容】
2021-09-27  粤嵌教育    Tags:CSS框架   点击:(74)  评论:(0)  加入收藏
水平和垂直对齐第一种方式 : grid + place-items .parent { display: grid; place-items: center; } /*注: place-items 是 justify-items 和 align-items 的简写属性 */...【详细内容】
2021-09-02  又菜又爱学习的程序员    Tags:CSS   点击:(84)  评论:(0)  加入收藏
5个有用的 CSS 布局生成器1、 cssgr.id如果你是前端开发人员,这是一个非常有用的网站。你可以首先指定所需的行数和列数,或者在给定的选项中进行选择,然后为其生成代码。这使你...【详细内容】
2021-08-26  程序员文周    Tags:css布局   点击:(144)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条