代码:CSS仿制 苹果按钮图标

首先,先复习一下:CSS的线性渐变、径向渐变

.linear{
    background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:-moz-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:-o-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
}/*线性渐变*/

.radial{
    background-image:-webkit-radial-gradient( yellow, orange,red);
    background-image:-moz-radial-gradient( yellow, orange,red);
    background-image:-o-radial-gradient( yellow, orange,red);
    background-image:radial-gradient( yellow, orange,red);
}/*径向渐变*/

CSS 仿制 苹果按钮图标:       2016-2-16

<style type="text/css">
html,body,ul,li,p{margin:0;padding:0;}
/*线性渐变:多色*/
.linear-white{background-image:linear-gradient(180deg, rgba(255,255,255,1),  rgba(255,255,255,0) 90%);}
.linear1{background-image:linear-gradient(180deg, red, orange,yellow,yellow,red);}
.linear2{background-image:linear-gradient(180deg, red, orange,yellow,green,blue,indigo,violet);}

/*径向渐变*/
.radial1{background-image:radial-gradient(at 50% 78%, yellow 8%, orange,red);}
.radial2{background-image:radial-gradient(at 50% 78%, #fea6fc 8%,#c95ceb ,#5b0491 );}
.radial3{background-image:radial-gradient(at 50% 78%, #5ebaf9 8%,#3871e3,#2244aa  );}
.radial4{background-image:radial-gradient(at 50% 78%, #e0f2fc 8%,#5baadc,#0f4e79  );}
.radial5{background-image:radial-gradient(at 50% 78%, #e9fcfc 8%,#a9beca,#465363  );}
.radial6{background-image:radial-gradient(at 50% 78%, #fafafa 8%,#b5b5b5,#888888  );}
.radial7{background-image:radial-gradient(at 50% 78%, #4dfd47 8%,#23e621,#028500  );}
.radial8{background-image:radial-gradient(at 50% 78%, #fefa68 8%,#feba22,#aa5600  );}

.img-circle{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.apple-btn{position:relative;width:100px;height:100px;margin:20px;float:left;}
.mask{position:absolute;top:5px;left:13px;right:13px;height:50px;}
.apple-btn p{position:absolute;color:#fff;top:50%;margin-top:-20px;font-size:32px;font-family:‘Microsoft YaHei‘;width:100%;text-align:center;text-shadow:0 2px 5px #999;z-index:2;}
.clear{clear:both;}
</style>
<h1>线性渐变</h1>
<div class="apple-btn linear1 img-circle"><div class="mask linear-white img-circle"></div></div>
<div class="apple-btn linear2 img-circle"><div class="mask linear-white img-circle"></div></div>
<div class="clear"></div>
<h1>径向渐变</h1>
<div class="apple-btn radial1 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial2 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial3 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial4 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial5 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial6 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial7 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>
<div class="apple-btn radial8 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

..

时间: 2024-10-27 00:53:21

代码:CSS仿制 苹果按钮图标的相关文章

[HTML/CSS]uploadify自定义按钮样式

概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你会看见CSS设置的按钮样式. 1 .uploadify-button { 2 background-color: #505050; 3 background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 4 background-

VC 对话框程序添加工具栏按钮图标及其按钮tooltip

注意:本人使用VC++2010开发环境进行测试. 在使用VC开发对话框程序时不像开发单文档程序和多文档程序那么方便,很多资源都需要自己手动添加.最近在开发一个程序时,想尝试在对话框程序里面添加 工具栏 及其 按钮tooltip,于是便有了这篇文章,希望把经验总结下来以方便自己以后查询以及各位同仁查询! 一.首先建立一个对话框程序 1.添加工具栏资源,并在工具栏资源里添加几个按钮,并将按钮的width 和 height 改为24,也可以根据自己的需要更改尺寸,同时,还要为相应的按钮设置一个ID.具

AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

一.Flutter AppBar 自定义顶部按钮图标.颜色 leading   在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title  标题,通常显示为当前界面的标题文字,可以放组件 actions  通常使用 IconButton 来表示,可以放按钮组 bottom  通常放 tabBar,标题下面显示一个 Tab 导航栏 backgroundColor  导航背景颜色 iconTheme  图标样式 textTheme  文字样式 centerT

jQuery Mobile 按钮图标

jQuery Mobile 提供的一套图标可令您的按钮更具吸引力. 1.为 jQuery Mobile 按钮添加图标 如需向您的按钮添加图标,请使用 data-icon 属性:(您也可以在 <button> 或 <input> 元素中使用 data-icon 属性.) <div data-role="page" id="pageone"> <div data-role="content"> <

直接在 CSS 中引用 FONTAWESOME 图标(附码表)

直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:before { content: '\f006'; font-family: FontAwesome; } 同时附上图标类对应的字符编码表: NAME CODE NAME CODE .fa-glass \f000 .fa-github-alt \f113 .fa-music \f001 .fa-folder

实用的css自适应宽度圆角按钮图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

纯CSS实现3D按钮效果

今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常少,如下所示 a.css-3d-btn{ position: relative; color: rgba(255, 255, 255, 1); text-decoration: none; background-color: rgba(219, 87, 51, 1); font-family: "M

Bootstrap-全局css样式之按钮

这里所说的按钮只是Bootstrap设计的能使标签或元素呈现按钮样式的属性,所以为 <a>.<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式. 当然在实际开发中使用Bootstrap,我们可能在任何地方使用按钮,但是你也可能会发现并不是所有的按钮都能按照你的想法去呈现,所以,按钮使用的一些注意事项我们要记住.我们看看官网给我们提出的注意事项. (1)针对组件的注意事项 虽然按钮类可以应用到 <

8.17 纯css画一个着重号图标

今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈 图标长这样: CSS代码: .hint{ display: inline-block; width: 20px; height: 20px; line-height: 20px; border: 1px solid red; border-radius: 10px; color: red; text-align: center; margin-left: 10px; cursor: default; }