纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
aaarticlea/png;base64,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" alt="" />
值得注意三点:
1.其中,主要使用了rotate.它能让文字旋转角度
2.还有radius,做圆角专用,很好用的属性.给想我这样的人省去了作图的时间.
3.W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。"
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
display: inline-block;
font-size: 40px;
font-weight: 700;
line-height: 40px;
text-shadow: 0 1px 2px rgba(0,0,0,.1);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
button{
font-size: 24px;
letter-spacing: 15px;
cursor: pointer;
width: 300px;
height: 44px;
margin-top: 25px;
padding: 0;
background: #ef4300;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #ff730e;
-moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
-webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.1);
-o-transition: all .2s;
-moz-transition: all .2s;
-webkit-transition: all .2s;
-ms-transition: all .2s;
}
button:hover {
-moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
-webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);
}
</style>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
$("button").click(function(){
alert("nihao!"); });
</script>
</head>
<body>
<span>+</span><br/>
<button>点击</button>
</body>
</html>
纯Div+Css制作的漂亮点击按钮和关闭按钮的更多相关文章
- 纯div+css制作的弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- Div+Css制作圆
Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...
- 项目实战之玩转div+css制作自己定义形状
项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...
- 使用div+css制作简单导航 以及要注意问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DIV+CSS制作斜线效果记录
DIV+CSS 斜线效果很简单,只需设置一下CSS Border 的边框就能有斜线效果.代码分享给大家,你可以自己变通. 提示要注意两点:1.DIV宽高的定义.2.DIV在 IE6 中默认是有高度的. ...
- div+css 制作表格
<div class="table"> <h2 class="table-caption">花名册:</h2> <di ...
随机推荐
- Ganglia监控安装配置
172.17.20.123 node1 gmetad.gmond.web 172.17.20.124 node2 gmond 1.服务器安装好epel源后,安装ganglia yum install ...
- 点按钮ajax get方法修改0或1状态封装成函数
最终效果 列表页面表格里点击按钮修改状态 按钮样式要引入bootstrap才可以用 本文件用的是laravel框架环境 larave路由里 Route::get('category/changesta ...
- labview在编写程序框图中遇到的一些布尔按钮控制布尔指示灯问题
上图布尔控件按下,数据0x04成功发送给下位机,布尔灯不亮. ............... ............. ........... 下图布尔控件按下, ...
- axios应用
Skip to content Features Business Explore Marketplace Pricing Sign in or Sign up Watch929 St ...
- 思杰VDI提示“The VDI is not available”
前言:困扰已久的问题终于解决. 问题:客户反馈无法连接VDI. 解决过程:1.登录后台查看VDI状态为关机状态尝试重新启动提示如下图: 2.判断此VDI的启动盘出现问题(注:本人环境无数据盘) 3.查 ...
- 【面试题】2018年最全Java面试通关秘籍第五套!
[面试题]2018年最全Java面试通关秘籍第五套! 原创 2018-04-26 徐刘根 Java后端技术 第一套:<2018年最全Java面试通关秘籍第一套!> 第二套:<2018 ...
- 《.NET 微服务:适用于容器化 .NET 应用的体系结构》关键结论
作为总结和要点,以下是本指南中最重要的结论.1 使用容器的好处: 基于容器的解决方案有节约成本的好处,因为容器是针对生产环境中缺少依赖而导致的部署问题提出的解决方案.容器能够显著改善devops和生产 ...
- Mysql字符串截取:Left()、Right()、Substring()、Substring_index()
在实际的项目开发中有时会有对数据库某字段截取部分的需求,这种场景有时直接通过数据库操作来实现比通过代码实现要更方便快捷些, mysql有很多字符串函数可以用来处理这些需求,如Mysql字符串截取总结: ...
- P5056 插头dp
题面 Source: unordered_map: #include <iostream> #include <tr1/unordered_map> #include < ...
- Kindle 3(非常旧的版本) 隔一段时间自动重启问题
买了本新书后,kindle 3 自己没事就在那边重启,几分钟一次 查到解决方案1: https://answers.yahoo.com/question/index?qid=2014040815565 ...