首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

制作Gmail式按钮

一个月前,Gmail重新设计了所有按钮。 原来的按钮是这样的。 新设计的按钮是这样的。 事实上,不仅是Gmail,Google公司很多其他项目都在使用后一种风格的按钮。...由于Gmail的CSS文件都是被压缩过的,简直无法读,不过好在按钮部分还没有被压缩,因此还算顺利,就把代码提取出来了。 下面我就来介绍,如何制作Gmail式的按钮。...请先看我制作的一个范例页面。...你可以根据按钮的不同情况,为前面HTML代码中第1个div区块,添加相应的class。 i. 如果一个按钮是主按钮,那么添加"goog-imageless-button-primary"。...如果好几个按钮组成一个"按钮组",就像范例中的Example 3,那么最左边的按钮添加"goog-imageless-button-collapse-right",最右边的按钮添加"goog-imageless-button-collapse-left

88620

ivx动效按钮 基础按钮制作 01

: 二、按钮制作 1.1 利用容器制作按钮 由于我们按钮的悬浮动效使用按钮本身直接设置并不好实现过多的效果,在此使用一个容器来编写按钮特效。...创建一个行,设置宽高分别为 150、50: 我们将该容器作为按钮,那么再设置对应的背景色: 设置完毕后我们需要给予这个按钮一个点击后类似于按钮点击的效果,我们给该按钮设置一个点击事件,点击后那么该按钮会出现一个阴影...如果你不需要做一些动效,那么直接添加文本即可;添加文本还需要注意要这个按钮行的水平、垂直居中: 若你觉得这个文本颜色没有对比度,直接更改背景色或文本颜色即可: 此时我们就完成了一个基础按钮,...此时更改行1名称为按钮: 那么若我们需要动效动效,我们需要增加一个绝对定位容器: 添加绝对定位容器后,会使整个页面错乱,并且文本也不好进行定位,此时若需要制作一个动效按钮,我们需要将这个这个绝对定位容器的高度置零...150 的一半 75即可: 垂直居中只需要设置文本的 y 坐标为 -20 即可: 因为当前高度为 40px,那么一半是 20,往上 y 轴为负数,所以是 -20px,那么这一个自定义按钮接下来就可以制作动态效果的按钮

2.7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ivx动效按钮 基础按钮制作 02

    本节示例: 一、特效块的制作 在上一节中制作了一个可以增加动效的自定义按钮后,这一节通过这个行按钮对其进行特效制作。...在行按钮中的绝对定位中,我们创建一个行,命名为移入,接下来我们做一个移入动效: 此时这个行会覆盖掉文本区域,我们将按钮文本移动至行之上: 此时这个行就不会盖掉之前的文本: 接着更改这个行为我们喜欢的颜色...: 接着我们先把行的坐标置于原点: 二、给动效块添加动画 此时我们需要将这个动效块行放置于这个按钮之外,那么此时可以给予指责格行的 x 值为负,并且由于该行还需要向上移动一段距离,所以该行的...此时只需要设置自定义按钮的是否裁剪为 是 即可,这样就会使这个按钮中超过按钮的区域将不会显示: 此时我们重命名轨迹为移入动画、重命名行1为移入块: 此时预览即可完成一个动效按钮: 若想设置其对应的圆角边框...,只需要设置自定义按钮行即可,他将会裁剪掉显示区域外部的内容: 后续将会有更多特效按钮制作教程。

    2.3K20

    利用C语言制作一个简易Shell

    myShell$ echo $PWD/home/ubuntu/myShellubuntu@VM-20-9-ubuntu:~/myShell$ echo $HOSTNAMEVM-20-9-ubuntu在C语言中我们可以通过函数...2.3.1 chdir()chdir 是一个C语言中的标准库函数,用于更改当前工作目录。它的全称是 "change directory"(更改目录),常用于改变进程的当前工作路径。...2.3.2 getcwd()getcwd 是 C 语言中的标准库函数,用于获取当前工作目录的绝对路径。它的全称是 "get current working directory"(获取当前工作目录)。...2.3.3 putenv()putenv 是 C 语言中的标准库函数,用于设置或修改环境变量。它的全称是 "put environment"(设置环境)。.../ubuntu]$cd ^H^H^H^C目前自定义shell存在的缺点:内建命令未实现完整。

    12810

    React | 如何制作一个按钮组件

    概要本文从零开始,使用React + TypeScript的方式制作一个按钮组件。面临的挑战起个好名在计算机中,有一个经常遇到但又十分难缠的问题,起名。好的名字可能是灵感闪现,也可能来自借鉴。...基础功能就是主题带Icon多尺寸开始编码原形按钮写一个基础组件,一般依赖于原html,按钮也不例外。...给点颜色在按钮的使用场景中,使用主要,次要,危险等颜色。不同的组件库,所选的这几种主题略有差别。见下面:设计颜色不在行,来到代码层面,该怎样实现呢?...'#6c757d' : type === 'success' ?......省略 };按钮结合图标图标有两种,一个是静态的,一个是loading。无需重绘按钮,因为本身就是可以在button内部加入图标与文字,只需要注意对其方式即可。

    19930

    c语言里面静态链接库的制作和使用

    今天在交流群里面看到有一个网友问了一个内联函数的问题,原本想写这个文章的;由于已经提前说写静态链接库的制作和使用,所以内联函数的文章,明天来写!...静态链接库的制作和使用 1.自己制作静态链接库: 这里我先在当前目录创建两个文件一个是hell.c ,另外一个是hell.h,然后在hell.c里面写上;  #include   void...注意:制作出来了静态库之后,发布时需要发布.a文件和.h文件。.../test hello 总结  今天的静态链接库的制作和使用,就分享到这里了,文章里面有讲到关于Makefile,这里可以参考我发的那个链接,里面讲的非常详细。...明天继续分享动态链接库的制作和使用以及内联函数的使用和概念。

    1.5K30

    各种语言按钮事件特征码

    ,很快就会到达核心代码,离你的破解也就不远了 本文就总结一下各类语言按钮事件的方法,当然也可以借助工具,如VBexplorer,DEDE,ECE等等 一、VB程序 其实,VB的按钮事件的找法是最为普遍的...OD载入后,CTRL+B 查找 816C24 二、Delphi和BC++程序 Delphi和BC++都是同一公司开发的,故查找方法都一样,当然你也可以使用DEDE....下面的工作就是不断的CTRL+L继续查找和F2下断了 三、易语言语言的这种查找方法,同样适合有壳的程序,其他的就必须脱壳后再继续操作了 OD载入后,就F9运行程序吧,当程序运行后, 然后CTRL...总结类:各种语言按钮事件特征码 VB: 816C24  Delphi & BC++ : 740E8BD38B83????????FF93????????  ...原文地址《各种语言按钮事件特征码》

    2K00

    【CSS】课程网站头部制作 ④ ( 搜索栏按钮测量 | 搜索栏按钮代码编写 | 代码示例 )

    文章目录 一、搜索栏按钮测量 1、按钮测量 2、按钮切图 二、搜索栏按钮代码编写 1、HTML 标签结构 2、CSS 样式 3、展示效果 一、搜索栏按钮测量 ---- 1、按钮测量 右侧的按钮大小..., 50 x 40 像素 ; 按钮颜色值 #00a4ff ; 2、按钮切图 使用 切片工具 , 将 按钮图片 进行选择 , 然后进行切图 ; 选择 " 菜单栏 / 文件 / 导出 / 存储为 Web...-- 头部模块 - 结束 --> 2、CSS 样式 核心样式 : 首先 , 先清除 按钮的 默认样式 , 按钮默认情况下自带 边框 ; 然后 , 设置 按钮浮动 , 才能再...搜索栏盒子 中 , 与 Input 表单放置在一行 , 并且二者之间没有缝隙 , 默认的行内块元素之间会有一条无法控制的缝隙 ; 最后 , 设置按钮图片 , 按钮图片无法填充满 , 使用平铺样式 ,...平铺后顶部的部分图片内容会填充底部缝隙 ; /* 清除按钮默认样式 ( 主要是按钮自带的边框 ) */ button { border: none; } /* 搜索框按钮 */ .search button

    2.3K70

    C++ Qt开发:PushButton按钮组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QPushButton...void setDefault(bool isDefault) 设置按钮是否为默认按钮。 bool isDefault() const 检查按钮是否为默认按钮。...void click() 模拟按钮点击。 void setFlat(bool flat) 设置按钮是否为平面按钮。 bool isFlat() const 检查按钮是否为平面按钮。...,并分别调整了按钮的常规属性包括按钮的高度宽度以及按钮的大小、按钮标题等,通过connect分别为按钮绑定了两个事件,以用于推出和触发打印函数,读者可自行运行代码观察变化; 1.2 图形界面创建 通过图形界面的创建很简单...,只需要拖拽控件Qt会帮我们做完所有的工作,这里我们就重点说说Qt中的QSS组件库的使用,Qt Style Sheets(QSS)是一种用于定义Qt应用程序外观和样式的样式表语言

    86110
    领券