html5做图片按钮

最新推荐文章于 2023-05-21 19:43:16 发布
最新推荐文章于 2023-05-21 19:43:16 发布
阅读量1.6k 收藏
点赞数
文章标签： 前端 大数据 javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangqiuy/article/details/84169186
版权

 

<!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>

 

</body>

</html>
huangqiuy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
18种html5图片分页导航按钮样式动画特效
09-08
18种html5图片分页导航按钮样式动画特效
html5带图片按钮,html5图片标签，图像中间的按钮
weixin_29649047的博客
06-04 469
5 个答案:答案 0 :(得分：1)作为替代方案，您可以使用display: grid。我相信，它非常直接，反应灵敏，并得到了大多数主流浏览器的支持。HTML SOME IMPORTANT TEXTCSS.bookList {position: absolute;width: 50%;border: solid;display: grid;grid-template-columns: 1fr a...
html5 按钮效果,带有html5的图像按钮
weixin_32254243的博客
06-03 191
< input type =“image”src =“img / beer.png”/>是为了收集坐标.如果您想将其用作提交按钮,则必须添加onsubmit-event,例如但您应该使用< button> -element,这样更灵活.它可以包含文本,图像或两者：Here's some optinal text you can even put it in a paragr...
html5怎么把图片做成按钮,网页制作提交按钮 关于用图片做网页提交按钮的问题...
weixin_30851261的博客
06-01 1444
网页设计中的按钮input提交后会调用什么函数，input 中有button按钮和submit按钮，button按钮没反应，可以用javascript实现它的功能 function but(){alert("hello");}你点击按钮就会弹出显示hello的一个框。html网页制作当中，如何实现编辑框使得用户输入内类似于qq空间里的留言框或评论框Q空间的留言板是连接数据库的，他的提交大概有2个操...
html图片按钮点击效果代码,Html图片按钮效果代码?
weixin_42719781的博客
06-03 640
示例代码如下：cal.html:HTMLHEADMETA http-equiv=Content-Type content=text/html; charset=utf-8TITLEPHP 计算器/TITLE/HEADBODYform action=deal.php method=post第一个数：input type=text size=5 name=num1 /br/运算符：select nam...
js+html5实现复制文字按钮
01-19
本文实例为大家分享了js+html5实现点击复制文字的按钮，供大家参考，具体内容如下 图片展示： 注意css中的样式，有些页面复制不成功就是没有添加那一句造成的。 代码块 <!DOCTYPE html> <html lang=en> ...
html5页面分享按钮.zip
07-24
HTML5页面分享按钮是现代网页设计中常见的功能，它允许用户方便地将网站内容分享到各种社交媒体平台，如QQ空间、新浪微博等。这个压缩包"html5页面分享按钮.zip"包含了一个名为"share-plug-ins-master"的项目，很...
HTML5压缩图片.zip
10-15
通过html5的canvas实现对图片的压缩，实现步骤： 1.通过文件选择按钮获取本地图片 2.获取本地图片的dataURI数据创建本地图片预览 3.创建canvas画布图片预览 4.通过canvas的toDataURL()方法返回压缩后的图片格式的...
html+css 实现图片右上角加删除叉、图片删除按钮
12-28
右上角的图片可自己换图片，图片素材我就不放上来了，我就上个代码，挺简单的css和js，初学者应该也看得明白 </pre><pre name=code class=html><!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
html实现图片按钮的两种简单方法
07-05
长时间不用这个，等到用的时候有点想不起来，所以总结起来，方便以后使用。
图片按钮代码(js+css)
09-03
图片按钮代码(js+css) 从网上找到了，觉得还不错
html图片按钮实现
m0_73676501的博客
05-21 1119
最近看tiy_github做了一个windows12网页版，特别火我就想做个windows2023（垃圾版）ee……不会做图片按钮所以我写了这篇文章。
html语言网页插图代码教程,HTML图片按钮写法
weixin_39860280的博客
05-30 492
1： 在一般情况下按钮提交表单：这样提交按钮是标签 ，如果想换成图片加上样式，把value="提交" 改成value=" "(这样“提交”两个字就不会显示在这张背景图片的上面)：#button{background:url(12.jpg) no-repeat;width:100px;height:50px;border:0px;cursor:pointer;}2：直接使用图片标签按钮这样子直接写在...
html5怎么把图片做成按钮,炫酷实用的jQuery插件 涵盖菜单、按钮、图片 | HTML5资源教程...
weixin_34638021的博客
06-01 355
新的一周开始了，今天我们要为大家分享一些全新的1、CSS3书本翻页动画 书本翻页效果逼真今天我们要分享一款炫酷而且实用的CSS3动画效果，它是模拟书本翻页的动画特效。当鼠标滑过书本右上角时，书本即可向前翻一页，而且翻页动画非常逼真。由于CSS3的运用，我们并不需要使用复杂的图片来制造逼真的书本效果，书本翻页可以很简单地完成。之前也有分享过一些HTML5书本翻页动画：jQuery/CSS3书本翻页动...
html图片按钮点击效果代码,JS实现图片点击后出现模态框效果
weixin_42525264的博客
06-03 1454
很多时候我们在浏览图片时，会发现点击图片后，会弹出一个被点击图片的放大图片浮在页面上，占满整个窗口。这就是图片模态框效果。这个效果可以使用某些js库实现，如bpopupJs。但是在这里我们使用纯js实现，能够更好理解效果原理和实现方法。一.实现思路我们点击小图片之后,图片模态框出现，同时图片模态框上有一个关闭按钮和图片的标题。因此，我们的实现思路就是：图片模态框有大图片，关闭按钮，图片标题三部分。...
html快速写法,HTML图片按钮写法
weixin_39547158的博客
06-03 171
1： 在一般情况下按钮提交表单：这样提交按钮是标签 ，如果想换成图片加上样式，把value="提交" 改成value=" "(这样“提交”两个字就不会显示在这张背景图片的上面)：#button{background:url(12.jpg) no-repeat;width:100px;height:50px;border:0px;cursor:pointer;}2：直接使用图片标签按钮这样子直接写在...
一个实用的图片按钮代码
fsclc的专栏
03-16 3194
function CheckForm(){ if (document.form1.name.value.length == 0) {  alert("请输入您的姓名！");  document.form1.name.focus();  return false;    }  if (document.form1.name.value.indexOf("")!=-1) {  alert("姓名中包含
css3+html5——按钮篇
十二tel
06-11 1万+
本篇包含了按钮的几种定义方法（包括默认按钮、链接定义的按钮、输入框定义的按钮、div定义的按钮）；也随便写了几个3D按钮（包括悬停变色按钮、阴影按钮、悬停出现阴影按钮、禁用按钮、箭头标记按钮、点击波纹按钮、按压效果按钮）也是做得比较丑，不过需要都话格式可以自己再调一下，大概效果如下：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
html中如何把图片变成按钮
热门推荐
luckyweiqi的专栏
04-24 2万+
1. 2. 3. 4.文字 5. 6. 
html5 实现图片自动播放按钮
最新发布
06-07
您可以使用HTML5的`<video>`元素来实现图片自动播放，同时添加一个播放/暂停按钮。以下是一个简单的示例： ```html <!-- 如果浏览器不支持HTML5 video标签，您可以在此处添加备用内容 --> ()">播放/暂停 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值