直接上代码：

<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. HDU1398 Square Coins

    Description People in Silverland use square coins. Not only they have square shapes but also their v ...

  2. Educational Codeforces Round 3 A

    A. USB Flash Drives time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  3. c#工具类之Int扩展类

    public static class IntHelper { /// <summary> /// 转换为2进制字符串 /// </summary> /// <param ...

  4. sonar 测试覆盖率

    <plugin> <groupId>org.jacoco</groupId> <artifactId>jacoco-maven-plugin</a ...

  5. day 006 小数据池和再谈编码

    1.小数据池. 目的:缓存我们的字符串,整数,布尔值.在使用的时候不需要创建过多的对象 缓存: int str bool int 范围:-5~256 str: 1.长度小于等于1,直接缓存 2.长度大 ...

  6. aerospike（2）-java client

    地址:https://www.aerospike.com/download/client/java/4.3.1/ 例子顺序:https://github.com/aerospike/aerospike ...

  7. 转 oracle 默认自动统计信息 时间修改

    ############sql3: https://blog.csdn.net/dataminer_2007/article/details/41363417http://blog.51cto.com ...

  8. python面向对象, 单例模式

    目录 单利模式 实现单利模式的方法 使用模块 使用__new__ 为了使类只能出现一个实例,我们可以使用 new 来控制实例的创建过程,代码如下: 使用装饰器 使用 metaclass 补充:元类(m ...

  9. 性能测试工具LoadRunner25-LR之常用性能指标计算公式

    1.吞吐量计算公式 定义:指单位时间内系统处理用户的请求数 从业务角度看,吞吐量可以用:请求数/秒.页面数/秒.人数/天或处理业务数/小时等单位来衡量. 从网络角度看,吞吐量可以用:字节/秒来衡量 对 ...

  10. 深入学习webpack（四）

    更多内容可以看此文档.