直接上代码：

<html>

<head>

<title>像文字一样的按钮</title>

<style>

body{

 background-color:#daeeff;   /* 页面背景色 */

}

form{

 margin:0px; padding:0px;

 font:14px;

}

input{

 font:14px Arial;

}

.txt{

 border-bottom:1px solid #005aa7; /* 下划线效果 */

 color:#005aa7;

 border-top:0px; border-left:0px;

 border-right:0px;

 background-color:transparent;  /* 背景色透明 */

}

.btn{

 background-color:transparent;  /* 背景色透明 */

 border:0px;       /* 边框取消 */

}

</style>

   </head>

<body>

<form method="post">

 请输入您的信息: <input type="text" name="name" id="name" class="txt">

 <input type="submit" name="btnSubmit" id="btnSubmit" value="我是按钮" class="btn">

</form>

</body>

</html>

　　效果：

　　

Html ： 将submit变成像文字一样的按钮的更多相关文章

  1. android带有文字的图片按钮的两种实现方式

    android带有文字的图片按钮的两种实现方式 1). TextView对Button用相对布局,这要要求按钮的背景图片要留下空白位置给文字.这种方式开发比较简单,适合做一些风格一致的Button. ...

  2. iOS 自定义图片和文字垂直显示按钮<上面是图片,文字显示下面>

    #import <UIKit/UIKit.h> @interface VerticalButton : UIButton @end #import "VerticalButton ...

  3. input[type='submit']input[type='button']button等按钮在低版本的IE下面，去掉黑色边框的问题

    今天做一个tabs效果的时候,发现上面的button在低版本下会出现黑色的边框,很难看,于是我整理了下几个去掉黑色边框的办法: 1.在button的外层嵌套一个div,设置button的border: ...

  4. 微信小程序 长按文字复制与按钮复制

    1. 长按文字复制 当要实现长按文字进行复制的时候,需要使用text标签,并将selectable属性设置为true <text class='url-txt' selectable='true ...

  5. GridControl的单元格中以buttonEdit实现文字和图片按钮并存的效果

    话不多说,先上效果图 对于第一列的效果是如何实现的就不多说了,网上有很多例子 重点是第三列的效果实现方法,代码如下 private void GridSet() { DevExpress.XtraEd ...

  6. 封装一个button上带图片的，图片在上，文字在下的按钮

    #import "CJShoppingDetailButton.h" @implementation CJShoppingDetailButton - (void)layoutSu ...

  7. iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】

    以前不怎么有这样的需求,最近开发经常用到,所以就干脆封装一个这样的 Button 让图片和字体都垂直居中,重写layoutSubviews方法,来实现就可以,至于 layoutSubviews 方法什 ...

  8. input文字垂直居中和按钮对齐问题，兼容IE8

    1.盒子模型问题:请CSS重置 2.按钮不对齐:请浮动或者vertical-align:middle;然后计算宽高,使其对齐 : 3.IE8文本不居中:line-height属性     注意:IE8 ...

  9. iOS UIButton 图片文字上下垂直布局 解决方案

    实现如图所示效果: 这是一个UIButton,需要改变image和title相对位置. 解决如下: //设置文字偏移:向下偏移图片高度+向左偏移图片宽度 (偏移量是根据［图片］大小来的,这点是关键)b ...

随机推荐

  1. maven 打包 包含xml

    <build> <finalName>dc-exam</finalName> <!-- 包含xml文件 --> <resources> &l ...

  2. N - 嘤嘤嘤 （并查集+枚举）

    Our lovely KK has a difficult Social problem. A big earthquake happened in his area. N(2≤N≤2000)N(2≤ ...

  3. web安全之文件上传漏洞攻击与防范方法

    一. 文件上传漏洞与WebShell的关系 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行.这里上传的文件可以是木马,病毒,恶意脚本或者WebShell等.这种攻击方式是最为直接和有效 ...

  4. NorFlash基础

    1. Nor Flash 简介 Nor Flash 闪速存储器具有可靠性高.随机读取速度快的优势,在擦出和编程操作较少而直接执行代码的场合,尤其是纯代码存储的应用中广泛使用. 2. Nor Flash ...

  5. github访问慢解决

    参考:https://github.com/chenxuhua/issues-blog/issues/3 hosts文件: # GitHub Start 192.30.253.112 github.c ...

  6. python 格式化时间含中文报错： 'locale' codec can't encode character '\u5e74'

    执行下面代码报错: UnicodeEncodeError: 'locale' codec can't encode character '\u5e74' in position 2: Illegal ...

  7. java——最大堆 MaxHeap

    使用数组来实现最大堆 堆是平衡二叉树 import Date_pacage.Array; public class MaxHeap<E extends Comparable <E>& ...

  8. 转 oracle cursor 游标

    转自:http://blog.csdn.net/liyong199012/article/details/8948952 游标的概念:     游标是SQL的一个内存工作区,由系统或用户以变量的形式定 ...

  9. Sequelize Docs 中文文档 v4

    Sequelize Docs 中文文档 v4 写在前面 Sequelize 是一个基于 promise 的 Node.js ORM, 目前支持 Postgres, MySQL, SQLite 和 Mi ...

  10. JQuery 判断滚动条是否到底部

    BottomJumpPage: function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).he ...