| <!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Just some other awesome CSS3 buttons - demo</title> |
|
<meta charset="utf-8">
|
|
<style>
|
|
body |
|
{ |
|
margin: 0; |
|
text-align: center; |
|
} |
|
|
|
h2 |
|
{ |
|
font: bold 1.4em 'Lucida sans', 'Trebuchet MS', Tahoma, Arial; |
|
color: #555; |
|
} |
|
|
|
.button |
|
{ |
|
display: inline-block; |
|
white-space: nowrap; |
|
background-color: #ddd; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));/****渐变 采用直线渐变 从左到顶，再到下****/ |
|
background-image: -webkit-linear-gradient(top, #eee, #ccc); |
|
background-image: -moz-linear-gradient(top, #eee, #ccc); |
|
background-image: -ms-linear-gradient(top, #eee, #ccc); |
|
background-image: -o-linear-gradient(top, #eee, #ccc); |
|
background-image: linear-gradient(top, #eee, #ccc); |
|
border: 1px solid #777; |
|
padding: 0 1.5em; |
|
margin: 0.5em; |
|
font: bold 1em/2em Arial, Helvetica; |
|
text-decoration: none; |
|
color: #333; |
|
text-shadow: 0 1px 0 rgba(255,255,255,.8); |
|
-moz-border-radius: .2em;/*****边框的圆角设置****/ |
|
-webkit-border-radius: .2em; |
|
border-radius: .2em; |
|
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);/**这个很重要 inset**/ |
|
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); |
|
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); |
|
} |
|
|
|
.button:hover |
|
{ |
|
background-color: #eee; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); |
|
background-image: -webkit-linear-gradient(top, #fafafa, #ddd); |
|
background-image: -moz-linear-gradient(top, #fafafa, #ddd); |
|
background-image: -ms-linear-gradient(top, #fafafa, #ddd); |
|
background-image: -o-linear-gradient(top, #fafafa, #ddd); |
|
background-image: linear-gradient(top, #fafafa, #ddd); |
|
} |
|
|
|
.button:active |
|
{ |
|
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; |
|
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; |
|
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; |
|
position: relative; |
|
top: 1px; |
|
} |
|
|
|
.button:focus |
|
{ |
|
outline: 0; |
|
background: #fafafa; |
|
} |
|
|
|
.button:before |
|
{ |
|
background: #ccc; |
|
background: rgba(0,0,0,.1); |
|
float: left; |
|
width: 1em; |
|
text-align: center; |
|
font-size: 1.5em; |
|
margin: 0 1em 0 -1em; |
|
padding: 0 .2em; |
|
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); |
|
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); |
|
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); |
|
-moz-border-radius: .15em 0 0 .15em; |
|
-webkit-border-radius: .15em 0 0 .15em; |
|
border-radius: .15em 0 0 .15em; |
|
pointer-events: none; |
|
} |
|
|
|
/* Buttons and inputs */ |
|
|
|
button.button, input.button |
|
{ |
|
cursor: pointer; |
|
overflow: visible; /* removes extra side spacing in IE */ |
|
} |
|
|
|
/* removes extra inner spacing in Firefox */ |
|
button::-moz-focus-inner |
|
{ |
|
border: 0; |
|
padding: 0; |
|
} |
|
|
|
/* If line-height can't be modified, then fix Firefox spacing with padding */ |
|
input::-moz-focus-inner |
|
{ |
|
padding: .4em; |
|
} |
|
|
|
/* The disabled styles */ |
|
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover |
|
{ |
|
background: #eee; |
|
color: #aaa; |
|
border-color: #aaa; |
|
cursor: default; |
|
text-shadow: none; |
|
position: static; |
|
-moz-box-shadow: none; |
|
-webkit-box-shadow: none; |
|
box-shadow: none; |
|
} |
|
|
|
/* Hexadecimal entities for the icons */ |
|
|
|
.add:before |
|
{ |
|
content: "\271A"; |
|
} |
|
|
|
.edit:before |
|
{ |
|
content: "\270E"; |
|
} |
|
|
|
.delete:before |
|
{ |
|
content: "\2718"; |
|
} |
|
|
|
.save:before |
|
{ |
|
content: "\2714"; |
|
} |
|
|
|
.email:before |
|
{ |
|
content: "\2709"; |
|
} |
|
|
|
.like:before |
|
{ |
|
content: "\2764"; |
|
} |
|
|
|
.next:before |
|
{ |
|
content: "\279C"; |
|
} |
|
|
|
.star:before |
|
{ |
|
content: "\2605"; |
|
} |
|
|
|
.spark:before |
|
{ |
|
content: "\2737"; |
|
} |
|
|
|
.play:before |
|
{ |
|
content: "\25B6"; |
|
} |
|
|
|
|
|
/* Social media buttons */ |
|
.tw, .fb, |
|
.tw:hover, .fb:hover |
|
{ |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0))); |
|
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); |
|
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); |
|
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); |
|
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); |
|
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0)); |
|
} |
|
|
|
.tw, .tw:focus |
|
{ |
|
background-color: #88E1E6; |
|
} |
|
|
|
.fb, .fb:focus |
|
{ |
|
background-color: #3C5A98; |
|
color: #fff; |
|
text-shadow: 0 1px 0 rgba(0,0,0,.4); |
|
} |
|
|
|
.tw:hover |
|
{ |
|
background-color: #b1f0f3; |
|
} |
|
|
|
.fb:hover |
|
{ |
|
background-color: #879bc3; |
|
} |
|
|
|
.tw:before |
|
{ |
|
content: "t"; |
|
background: #91cfd3; |
|
background: rgba(0,0,0,.1); |
|
color: #fff; |
|
font-family: verdana; |
|
text-shadow: 0 1px 0 rgba(0,0,0,.4); |
|
} |
|
|
|
.fb:before |
|
{ |
|
content: "f"; |
|
background: #4467ac; |
|
background: rgba(0,0,0,.1); |
|
color: #fff; |
|
text-shadow: 0 1px 0 rgba(0,0,0,.4); |
|
} |
|
|
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<br><br>
|
|
|
|
<h2>Actions</h2>
|
|
<a href="" class="button">Button</a>
|
|
<a href="" class="button add">Add</a>
|
|
<a href="" class="button edit">Edit</a>
|
|
<a href="" class="button delete">Delete</a>
|
|
<a href="" class="button save">Save</a>
|
|
<a href="" class="button email">Send email</a>
|
|
|
|
<br><br>
|
|
|
|
<h2>Miscellaneous</h2>
|
|
<a href="http://www.clxgj.com " class="button like">Like</a> |
|
<a href="http://www.clxgj.com" class="button next">Next</a> |
|
<a href="http://www.clxgj.com" class="button star">Favourite</a> |
|
<a href="http://www.clxgj.com" class="button spark">Spark</a> |
|
<a href="http://www.clxgj.com" class="button play">Play</a> |
|
|
|
<br><br>
|
|
|
|
<h2>Social media buttons</h2>
|
|
|
|
<a href="http://www.clxgj.com " class="button tw">Follow me</a>
|
|
<a href="http:// javascript:mctmp(0);www.clxgj.com" class="button fb">Become a fan</a>
|
|
|
|
|
|
<h2>Buttons and inputs</h2>
|
|
|
|
<button class="button">Clean button</button>
|
|
<button class="button save">Button with icon</button>
|
|
<button class="button" disabled>Disabled button</button>
|
|
<button class="button save" disabled>Another disabled button</button>
|
|
|
|
<br> |
|
<input class="button" type="submit" value="Input submit"> |
|
<input class="button" type="button" value="Input button"> |
|
<input class="button" type="submit" value="Input submit disabled" disabled> |
|
<input class="button" type="button" value="Input button disabled" disabled>
|
相关推荐
总的来说，HTML图片按钮是网页设计的重要组成部分，通过HTML、CSS和JavaScript的配合，我们可以创建出功能强大、外观美观的图片按钮，提升用户体验。在实际项目中，可以根据需求选择合适的图片资源，结合前端技术...
HTML图片按钮制作工具是一种用于创建美观、自定义的HTML按钮的软件或在线服务。这些工具通常包含各种预设样式、颜色方案、边框效果、阴影、渐变等元素，允许用户通过直观的界面来设计和生成HTML代码，以便在网页上...
在网页设计中，HTML（超文本标记语言）是构建页面结构的基础，而图片按钮则是增强交互性和视觉吸引力的重要元素。本文将详细介绍两种在HTML中实现图片按钮的简单方法，并通过实例代码进行解析。 方法一：使用`...
这个库非常有用，因为HTML元素无法直接保存为图片，而Canvas是HTML5中一个可以绘制图形并将其导出为图像的元素。 实现这个功能的步骤大致如下： 1. **HTML部分**：创建一个按钮，作为触发生成图片的触发器。按钮的...
在本案例中，“html5基于svg带遮罩按钮控制响应式图片切换特效”指的是利用HTML5和SVG技术实现的一种动态图片展示方式，通过按钮控制带有遮罩效果的图片进行响应式的切换。 首先，HTML5的 `<svg>` 元素是实现SVG...
【标题】"近100款漂亮CSS3/HTML5按钮合集.rar"涉及的知识点主要集中在CSS3和HTML5的交互设计上，尤其是利用这两种技术实现的各种样式丰富的按钮效果。CSS3是CSS（层叠样式表）的第三个版本，引入了大量新的选择器、...
"图片按钮制作工具 html编写专用"是一款专为HTML页面制作图片按钮的软件，尤其适合对中文支持良好的环境。这款工具可以帮助设计师和开发者快速创建具有吸引力的、自定义的图片按钮，提升网站或应用的用户体验。 在...
标题中的“图片加播放按钮（含切换图片播放按钮）”是指在图像元素上添加一个播放按钮，以便用户可以通过点击该按钮来启动或切换一组图片的动态展示，类似于幻灯片的效果。这种功能常用于产品展示、相册浏览或动态...
【CSS3 html5水晶分页按钮代码】是一个利用HTML5和CSS3技术实现的精美分页按钮特效资源。这个压缩包包含了一个名为`codesc.net`的文件，它很可能是包含完整代码的HTML文件或者一个代码片段。在这个项目中，开发者...
在网页设计和开发中，图片轮播是一种常见的交互元素，用于展示一组图片或内容，而“图片轮播素材 左右按钮切换 图片叠加”这一主题涵盖了几个关键知识点，包括图片轮播的设计、左右按钮的交互功能以及图片叠加效果。...
在网页设计中，"HTML5图片响应式布局点击弹出大图切换特效"是一个常见的功能需求，它结合了HTML5的新特性与响应式设计，旨在为用户提供更好的视觉体验。这个功能使得用户在浏览网页时，可以点击小图预览模式，以弹出...
5 代表按钮在 Default 状态下 按钮默认 ; 6 估计用不上 直接上老外的原文吧:< used only on tablet computers ; 其中数组的第一个必须有 也就是上边的BT1Options 后边的根据需要添加 ; ;2 BC是Background Color...
HTML5是Web开发的一个重要里程碑，它引入了许多新特性，其中就包括了强大的文件操作能力，使得在浏览器中实现多张图片的上传和删除成为可能。这个“HTML5多张图片上传删除代码.zip”文件应该包含了一个实现这一功能...
### input框添加图片按钮 #### 知识点概述 在网页设计中，为了优化用户体验及提升界面美观度，经常会遇到需要在`input`框旁边或内部加入图标按钮的情况。例如，一个登录表单中的“显示密码”按钮或者搜索框旁边的...
用户可以通过点击左右按钮来切换不同图片，并且当达到首尾图片时，对应的按钮会变为灰色以提示无法再进行切换。 #### 二、HTML结构解析 1. **容器布局**： - `#wrap`：整体布局容器，根据不同的样式（如`.banner02...
要解决这个问题，我们需要将原有的基于Flash的图片上传插件替换为HTML5的图片上传插件。HTML5提供了File API和FormData对象，使得无需Flash就能实现文件的拖放上传、预览和多文件选择等功能，这使得在没有Flash支持...
本项目“jquery html5响应式布局图片滚动带左右按钮控制图片滚动”结合了jQuery和HTML5的力量，实现了一个适应性强且交互友好的图片展示功能。 jQuery是一款轻量级的JavaScript库，它简化了JavaScript的DOM操作、...
jQuery html5导航菜单点击图标按钮动画弹出菜单代码 jQuery html5导航菜单点击图标按钮动画弹出菜单代码 jQuery html5导航菜单点击图标按钮动画弹出菜单代码 jQuery html5导航菜单点击图标按钮动画弹出菜单代码
HTML5页面分享按钮是现代网页设计中常见的功能，它允许用户方便地将网站内容分享到各种社交媒体平台，如QQ空间、新浪微博等。这个压缩包"html5页面分享按钮.zip"包含了一个名为"share-plug-ins-master"的项目，很...
【DreamWeaver图片按钮】是网页设计中一种增强交互性和美观性的技巧，它可以用来创建具有独特视觉效果的按钮，效果可以媲美Flash按钮。在DreamWeaver中制作图片按钮，可以使网页更加生动活泼，吸引用户的注意力，...