精华内容
下载资源
问答
  • CSS 按钮链接

    2018-02-21 22:11:34
    按钮链接在任何浏览器下,默认的链接都太过平淡,不能满足大多数人的需求。尤其是希望有特大点击区域的链接,比如制作主导航链接、手风琴菜单、按钮链接时,默认的链接更是无能为力,而按钮链接便可担此重任。...

    在任何浏览器下,默认的链接都太过平淡,不能满足大多数人的需求。尤其是希望有特大点击区域的链接,比如制作主导航链接、手风琴菜单、按钮等链接时,默认的链接更是无能为力,而按钮式链接便可担此重任。

    链接默认是行内元素,只能通过链接文本来激活链接。要想让链接像按钮一样,较大的点击区域,其实很简单。只需为链接添加合适的内边距,并设置类似按钮的背景和边框即可。

    
    
    1. a  {
    2.     padding: 10px 18px;
    3.     color: #fff;
    4.     font-size: 14px;
    5.     font-weight: bold;
    6.     border-radius: 4px;
    7.     background: #f74c4c;
    8.     text-decoration: none;
    9. }

    运行结果如图 6‑1 所示:

    按钮式链接图6-1 按钮式链接

    为了提高页面的可访问性,跟普通超链接一样,也要为按钮式链接定义其他两个状态下的样式,一个是鼠标悬停和获取焦点的状态,一个是激活状态。

    
    
    1. a:hover,  a:focus {
    2.     background: #f14b00;
    3. }
    4. a:active  {
    5.     background: #f1004b;
    6. }

    对于简单的按钮,修改背景颜色就很合适,但对于比较复杂的按钮,可能需要使用背景图像。一般需要 3 个图像,一个用于默认状态,一个用于鼠标悬停和获取焦点的状态,一个用于激活状态。然后,为不同的状态应用不同的背景,就可以让不同状态下的链接,具有不同的风格。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • html问题给按钮加链接

    2014-05-10 06:06:20
    > ($alipayConfig.open eq 0) OR ($totalProductFee lt 0.1)">保存保存并付款</if>" /> 怎么让 保存并付款这个 按钮 跳转到 index.html 这个页面
  • 1、按钮做成链接(图片)的样子 提交按钮 提交链接提交 重置按钮 重置链接重置 普通按钮 普通链接链接 至于图片也一样把a标签换成img 2、链接做成按钮的样子 注册 ...
    1、按钮做成链接(图片)的样子
    


    提交按钮<input type="submit" value="提交">


    提交链接<a href="#" οnclick="表单名字.submit()">提交</a>


    重置按钮<input type="reset" value="重置">


    重置链接<a href="#" οnclick="表单名字.reset()">重置</a>


    普通按钮<input type="button" value="按钮" οnclick="函数()">


    普通链接<a href="#" οnclick="函数()">链接</a>


    至于图片也一样把a标签换成img


    2、链接做成按钮的样子


    <a href="reg.asp">注册</a>


    =><input type="button" value="注册" οnclick="location.href='reg.asp'">

    -----------------------------------

    有的时候我们完全可以手工做一个get方式的表单,至于用按钮还是链接随心所欲。

    <form action="xx.asp" method="get" name="form1">


      <input name="aa" type="text" id="aa">


      <input name="bb" type="text" id="bb">


      <input type="submit" name="Submit" value="提交">

    </form>

    =>

    <input name="aa" type="text" id="aa">


    <input name="bb" type="text" id="bb">


    <input type="button" value="按钮" οnclick="location.href='xx.asp?aa='+document.all['aa'].value+'&bb='+document.all['bb'].value">


    -----------------------------------


    进一步说我们还可以做一个按钮(链接)来同时传递js变量,表单input的值,asp变量,Recordset值


    <script language="javascript">


    var id1=1;


    </script>


    <%


    id3=3


    ....


    rs.open exec,conn,1,1


    假设有rs("id4")=4


    ...


    %>


    <input name="id2" type="text" id="id2" value="2">


    <input type="button" value="按钮"


    οnclick="location.href='xx.asp?id1='+id1+'&id2='+document.all['id2'].value+'&id3=<%=id3%>&id4=<%=rs("id4")%>'">


    我们按下按钮会看到浏览器的url是xx.asp?id1=1&id2=2&id3=3&id4=4


    在xx.asp中我们就可以用request.querystring来得到所有变量,这样是不是变相的客户端js和服务器段的变量传递?


    ------------------------------------------------------------------------------------------------------------------------------

    如何给按钮加上链接功能

    解决思路:

    按钮属于控件级的对象,优先级比较高,所以不能象图片或文本一样直接加链接,只能通过按钮的单击事件调用脚本的方式来实现。

    具体步骤:

        1.在原窗口打开链接

        <input type="button" 


    value="闪吧" onClick="location=’http://www.xxx.net’">

        <button onClick="location.href=’http://www.xxxx.net’">闪吧</button>

        <form action="http://www.xxxx.net%22%3e%3cinput/ type="submit" value="打开链接"></form>

        2.在新窗口中打开链接

        <input type="button" 

    value="闪吧" onClick="window.open(’http://www.xxxx.net’)">

        <button onClick="window.open(’http://www.xxxx.net’)">ggg</button>

        <form action="http://www.xxxx.net/" 


    target="_blank"><input type="submit" value="打开链接"></form>


    注意:onClick调用的代码里的引号在只有一重时可以单双嵌套,超过两重就必须用"\"号转义且转义的引号必须跟里层的引号一致,如:


    <button onClick="this.innerHTML=’<font color=\’red\’>http://www.xxxx.net</font>’">闪吧</button>



    <button onClick=’this.innerHTML="<font color=\"red\">http://www.xxxx.net</font>"’>闪吧</button>


    而下面都是错误的写法:


    <button onClick="this.innerHTML=’<font color=’red’>http://www.xxxx.net</font>’">闪吧</button>


    <button onClick="this.innerHTML=’<font color="red">http://www.xxxx.net</font>’">闪吧</button>


    <button onClick="this.innerHTML=’<font color=\"red\">http://www.xxxx.net</font>’">闪吧</button>


     提示:大部分属于window或document对象的方法和属性都可以省略前缀window或document,比如说本例中的location.href(location.href又可以简写为location,因为location的默认对象为href)就是window.location.href或document.location.href的省略式写法。


    技巧:本例中还可以用下面的方法来代替location.href


    location.replace(url)


    location.assign(url)


    navigate(url)


    特别提示


    第一步中的代码运行后,单击按钮将跳转到链接目标。而第二步的在单击按钮后将在新窗口中打开链接。


    特别说明

    本例主要是通过用onClick捕获用户在按钮上的单击事件,然后调用location对象的href方法或window对象的open方法来打开链接。另外一个技巧是通过提交表单来实现链接功能,按钮必须是type=submit类型的按钮,表单的action值就是链接目标,target值就是链接打开的目标方式。
    展开全文
  • 一个简单的实例,实现html上加按钮来打开其他的网页,用于其他程序的整合。
  • 如何给按钮加上链接功能

    千次阅读 2009-10-16 11:47:00
    设计网站的时,我们可能会想把链接做成按钮的样子,按钮做成链接的样子。下面说一下我的方法。 1、按钮做成链接(图片)的样子 提交按钮 提交链接提交 重置按钮 重置链接重置 普通按钮 普通链接链接 至于图片也一样...
    脚本说明:
    把如下代码加入<body>区域中
    <INPUT TYPE="submit" value="建站资源网" οnclick="location.href='http://www.jzzy.com'">


    按钮链接乾坤大挪移  
    作为一个小技巧,暂时归类到ASP中。
    在设计网站的时,我们可能会想把链接做成按钮的样子,按钮做成链接的样子。下面说一下我的方法。
    1、按钮做成链接(图片)的样子
    提交按钮<input type="submit" value="提交">
    提交链接<a href="#" οnclick="表单名字.submit()">提交</a>
    重置按钮<input type="reset" value="重置">
    重置链接<a href="#" οnclick="表单名字.reset()">重置</a>
    普通按钮<input type="button" value="按钮" οnclick="函数()">
    普通链接<a href="#" οnclick="函数()">链接</a>
    至于图片也一样把a标签换成img
    2、链接做成按钮的样子
    <a href="reg.asp">注册</a>
    =><input type="button" value="注册" οnclick="location.href='reg.asp'">
    -----------------------------------
    有的时候我们完全可以手工做一个get方式的表单,至于用按钮还是链接随心所欲。
    <form action="xx.asp" method="get" name="form1">
      <input name="aa" type="text" id="aa">
      <input name="bb" type="text" id="bb">
      <input type="submit" name="Submit" value="提交">
    </form>
    =>
    <input name="aa" type="text" id="aa">
    <input name="bb" type="text" id="bb">
    <input type="button" value="按钮" οnclick="location.href='xx.asp?aa='+document.all['aa'].value+'&bb='+document.all['bb'].value">
    -----------------------------------
    进一步说我们还可以做一个按钮(链接)来同时传递js变量,表单input的值,asp变量,Recordset值
    <script language="javascript">
    var id1=1;
    </script>
    <%
    id3=3
    ....
    rs.open exec,conn,1,1
    假设有rs("id4")=4
    ...
    %>
    <input name="id2" type="text" id="id2" value="2">
    <input type="button" value="按钮"
    οnclick="location.href='xx.asp?id1='+id1+'&id2='+document.all['id2'].value+'&id3=<%=id3%>&id4=<%=rs("id4")%>'">
    我们按下按钮会看到浏览器的url是xx.asp?id1=1&id2=2&id3=3&id4=4
    在xx.asp中我们就可以用request.querystring来得到所有变量,这样是不是变相的客户端js和服务器段的变量传递?
    ------------------------------------------------------------------------------------------------------------------------------
    如何给按钮加上链接功能


    解决思路:
    按钮属于控件级的对象,优先级比较高,所以不能象图片或文本一样直接加链接,只能通过按钮的单击事件调用脚本的方式来实现。
    具体步骤:
        1.在原窗口打开链接
        <input type="button"   value="闪吧" onClick="location=’http://www.flash8.net’">
        <button onClick="location.href=’http://www.flash8.net’">闪吧</button>
        <form action="http://www.flash8.net"><input type="submit" value="打开链接"></form>
        2.在新窗口中打开链接
        <input type="button"  
    value="闪吧" onClick="window.open(’http://www.flash8.net’)">
        <button onClick="window.open(’http://www.flash8.net’)">闪吧</button>
        <form action="http://www.flash8.net"  
    target="_blank"><input type="submit" value="打开链接"></form>
    注意:onClick调用的代码里的引号在只有一重时可以单双嵌套,超过两重就必须用"/"号转义且转义的引号必须跟里层的引号一致,如:
    <button onClick="this.innerHTML=’<font color=/’red/’>http://www.flash8.net</font>’">闪吧</button>

    <button onClick=’this.innerHTML="<font color=/"red/">http://www.flash8.net</font>"’>闪吧</button>
    而下面都是错误的写法:
    <button onClick="this.innerHTML=’<font color=’red’>http://www.flash8.net</font>’">闪吧</button>
    <button onClick="this.innerHTML=’<font color="red">http://www.flash8.net</font>’">闪吧</button>
    <button onClick="this.innerHTML=’<font color=/"red/">http://www.flash8.net</font>’">闪吧</button>
    提示:大部分属于window或document对象的方法和属性都可以省略前缀window或document,比如说本例中的location.href(location.href又可以简写为location,因为location的默认对象为href)就是window.location.href或document.location.href的省略式写法。
    技巧:本例中还可以用下面的方法来代替location.href
    location.replace(url)
    location.assign(url)
    navigate(url)
    特别提示
    第一步中的代码运行后,单击按钮将跳转到链接目标。而第二步的在单击按钮后将在新窗口中打开链接。
    特别说明

    本例主要是通过用onClick捕获用户在按钮上的单击事件,然后调用location对象的href方法或window对象的open方法来打开链接。另外一个技巧是通过提交表单来实现链接功能,按钮必须是type=submit类型的按钮,表单的action值就是链接目标,target值就是链接打开的目标方式。
    展开全文
  • 链接做成按钮

    千次阅读 2009-08-12 11:24:00
    按钮链接乾坤大挪移 设计网站的时,我们可能会想把链接做成按钮的样子,按钮做成链接的样子。下面说一下我的方法。(内容转载互联网部落格)1、按钮做成链接(图片)的样子提交按钮提交链接提交重置按钮重置链接重置...

    按钮链接乾坤大挪移 

    在设计网站的时,我们可能会想把链接做成按钮的样子,按钮做成链接的样子。下面说一下我的方法。(内容转载互联网部落格)
    1、按钮做成链接(图片)的样子
    提交按钮<input type="submit" value="提交">
    提交链接<a href="#" οnclick="表单名字.submit()">提交</a>

    重置按钮<input type="reset" value="重置">
    重置链接<a href="#" οnclick="表单名字.reset()">重置</a>

    普通按钮<input type="button" value="按钮" οnclick="函数()">
    普通链接<a href="#" οnclick="函数()">链接</a>

    至于图片也一样把a标签换成img

    2、链接做成按钮的样子
    <a href="reg.asp">注册</a>
    =><input type="button" value="注册" οnclick="location.href='reg.asp'">

    -----------------------------------
    有的时候我们完全可以手工做一个get方式的表单,至于用按钮还是链接随心所欲。
    <form action="xx.asp" method="get" name="form1">
      <input name="aa" type="text" id="aa">
      <input name="bb" type="text" id="bb">
      <input type="submit" name="Submit" value="提交">
    </form>
    =>
    <input name="aa" type="text" id="aa">
    <input name="bb" type="text" id="bb">
    <input type="button" value="按钮" οnclick="location.href='xx.asp?aa='+document.all['aa'].value+'&bb='+document.all['bb'].value">
    -----------------------------------
    进一步说我们还可以做一个按钮(链接)来同时传递js变量,表单input的值,asp变量,Recordset值
    <script language="javascript">
    var id1=1;
    </script>
    <%
    id3=3
    ....
    rs.open exec,conn,1,1
    假设有rs("id4")=4
    ...
    %>
    <input name="id2" type="text" id="id2" value="2">
    <input type="button" value="按钮" 
    οnclick="location.href='xx.asp?id1='+id1+'&id2='+document.all['id2'].value+'&id3=<%=id3%>&id4=<%=rs("id4")%>'">
    我们按下按钮会看到浏览器的url是xx.asp?id1=1&id2=2&id3=3&id4=4
    在xx.asp中我们就可以用request.querystring来得到所有变量,这样是不是变相的客户端js和服务器段的变量传递?

    ------------------------------------------------------------------------------------------------------------------------------

    如何给按钮加上链接功能

     

     

     

    解决思路: 
    按钮属于控件级的对象,优先级比较高,所以不能象图片或文本一样直接加链接,只能通过按钮的单击事件调用脚本的方式来实现。

    具体步骤: 
        1.在原窗口打开链接 

        <input type="button"  
    value="闪吧" onClick="location=’http://www.flash8.net’"> 
        <button onClick="location.href=’http://www.flash8.net’">闪吧</button> 
        <form action="http://www.flash8.net"><input type="submit" value="打开链接"></form> 

        2.在新窗口中打开链接 

        <input type="button"  
    value="闪吧" onClick="window.open(’http://www.flash8.net’)"> 
        <button onClick="window.open(’http://www.flash8.net’)">闪吧</button> 
        <form action="http://www.flash8.net"  
    target="_blank"><input type="submit" value="打开链接"></form> 

    注意:onClick调用的代码里的引号在只有一重时可以单双嵌套,超过两重就必须用"/"号转义且转义的引号必须跟里层的引号一致,如: 

    <button onClick="this.innerHTML=’<font color=/’red/’>http://www.flash8.net</font>’">闪吧</button> 

    或 

    <button onClick=’this.innerHTML="<font color=/"red/">http://www.flash8.net</font>"’>闪吧</button> 

    而下面都是错误的写法: 

    <button onClick="this.innerHTML=’<font color=’red’>http://www.flash8.net</font>’">闪吧</button> 

    <button onClick="this.innerHTML=’<font color="red">http://www.flash8.net</font>’">闪吧</button> 

    <button onClick="this.innerHTML=’<font color=/"red/">http://www.flash8.net</font>’">闪吧</button> 

     提示:大部分属于window或document对象的方法和属性都可以省略前缀window或document,比如说本例中的location.href(location.href又可以简写为location,因为location的默认对象为href)就是window.location.href或document.location.href的省略式写法。 
    技巧:本例中还可以用下面的方法来代替location.href 
    location.replace(url) 
    location.assign(url) 
    navigate(url) 
    特别提示 
    第一步中的代码运行后,单击按钮将跳转到链接目标。而第二步的在单击按钮后将在新窗口中打开链接。 

    特别说明


    本例主要是通过用onClick捕获用户在按钮上的单击事件,然后调用location对象的href方法或window对象的open方法来打开链接。另外一个技巧是通过提交表单来实现链接功能,按钮必须是type=submit类型的按钮,表单的action值就是链接目标,target值就是链接打开的目标方式

    展开全文
  • QQ按钮点击好友

    千次阅读 2015-06-30 15:36:50
    QQ按钮点击好友
  • 提交按钮怎么超链接?

    千次阅读 2017-05-18 13:44:19
    原:... 提交按钮加超链接,这个的话,我们一般的都是通过按钮前面加一个a标签的,将这个按钮包裹a标签里面,然后href,加上链接地址就行了,这里我写一段代码:
  • Extjspanel的标题栏上加按钮的方法

    千次阅读 2018-11-13 10:42:32
    //按钮位置可通过此样式进行修改,如果按钮靠右显示可修改为把left改成right //采用此解决方案可以避免标题栏被撑高。 style:'position: absolute;top: 5px;left: 60px;', text: 'ok',scope: me, handler:...
  • 看了不少博客,可能是我少敲了什么,很少有能成功运行的,最后终于发现了一个可行方案,于是这里记录一下(代码为原创) 图片使用的p站喜爱画师的作品(因为是以前保存的,抱歉没找到画师链接),侵删。...
  • 按钮button超链接

    千次阅读 2013-12-05 17:06:28
    突然想做一个普通按钮,然后让按钮超链接到别的页面,不知道怎么搞,不过还是百度找到了。1.如果让本页转向新的页面则用: 2.如果需要打开一个新的页面进行转向,则用:
  • C# WinForm中窗口标题栏上加按钮

    千次阅读 2010-05-20 18:21:00
    转自http://blog.163.com/da7_1@126/blog/static/104072678201001310219448/ Windows API中的HDC可以通过Graphics.FromHdc()转换为(创建出)System.Drawing.Graphics,然后就可以用.NET Framework GDI+提供... 窗口
  • 使用dw添加给登录按钮添加链接

    千次阅读 2019-02-02 09:18:50
    使用dw添加给登录按钮添加链接代码如下: 使用A标签设置链接下面是添加了链接的代码 div class=“al” div class=“pro_plan” a href="首页.html"登录/a /div div class=“wjmm” a href="首页....
  • 用途:项目侧边栏添加自定义功能按钮链接 1.系统管理 -> 插件管理 -> 搜索并安装 Sidebar Link 插件 2.打开项目 -> 配置 -> 勾选 Sidebar Links 配置 Link URL 链接地址 Link Text 链接描述 Link Icon ...
  • 如何给按钮加上链接功能

    千次阅读 2006-07-14 14:49:00
    解决思路: 按钮属于控件级的对象,优先级比较高,所以不能象图片或文本一样直接加链接,只能通过按钮的单击事件调用脚本的方式来实现。 具体步骤: 1.在原窗口打开链接 value="闪吧" onClick="location=’...
  • js点击复制剪贴板鼠标点击文字弹出复制链接按钮 js点击复制剪贴板鼠标点击文字弹出复制链接按钮
  • 图片切换播放按钮按钮链接不会随图片切换而切换
  • html按钮button超链接

    千次阅读 2017-04-06 17:01:00
    1.如果让本页转向新的页面则用: 2.如果需要打开一个新的页面进行转向,则用:
  • Html 按钮button超链接

    千次阅读 2015-01-11 08:09:04
    http://blog.csdn.net/maxracer/article/details/6409437 1.页面转向新的页面: 2.需要打开一个新的页面进行转向: 由于浏览器内核不一样 IE中使用: firefox中使用:
  • 我要做一个图片轮播加按钮渐变切换图片,打开自动播放渐变切换图片,点击按钮也渐变切换图片。 现在做的是根据这个链接做的,但点击按钮时不能实现前后显示图片的淡入淡出。...请知道的朋友告诉详细制作过程,我网上...
  • 按钮添加链接的方法

    千次阅读 2008-11-17 10:02:00
    p align="center"> input type="submit" value="更新" /> input type="button" value="确认订单" onclick="document.location.href=confirm.jsp"/> p>form>
  • 大部分华为手机点击按钮,跳转页面不生效,需要个时间戳 <div class="nextBtn fs-14" id="nextTry" onclick="window.location.href = location.href+'?time='+((new Date()).getTime());">开始下一次试穿&...
  • 点击链接跳转到QQ好友链接怎么生成的? 网页版本点击跳转到添加好友界面: http://wpa.qq.com/msgrd?v=3&amp;uin=2445408174&amp;site=qq&amp;menu=yes 其中uin=2445408174 这后面的是个人QQ,你...
  • 页面1:one.html 中通过微信浏览器右角自带的分享,将页面2:two.html分享出去。微信浏览器以及其他各种浏览器自带的分享默认分享的是本页面地址,第一张图片作为封面,描述可能是一个链接或其他,看浏览器而定。...
  • jQuery 带按钮的数字输入框

    千次阅读 2019-05-06 23:42:07
    按钮的数字输入框是一个常见而实用的功能,通常出现“购买”的业务中方便快速的选择需要购买的数量。 在线演示地址:http://www.jq22.com/webqd5991 示例图: 源码: <!DOCTYPE html> <...
  • 来自:Office之家 链接:http://www.icanzc.com/powerpoint/6851.html PPT 中添加动作按钮,能为我们的 PPT 提高逼格哦,更何况系统为我们提供了很多自带的动作按钮,已适应于各种场景?制作PPT有时需要根据要求对...
  • 假设现在我们想把按钮上的文字改成“查看“。有两种方式可是实现:插件;修改代码。插件WC Custom Add to Cart labels插件专门用来做这个工作。安装并激活后,再WooCommerce的Setting->Products中会出现Add to cart ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 160,049
精华内容 64,019
关键字:

如何在按钮上加链接