CSS设置像文字一样的按钮

CSS可以将按钮变成普通的文字一样。

首先，跟普通的表单一样，定义<form>、<input>等标记，并设置相应的类型，以便控制它的样式。

<html><head><title></title><style><!----></style></head><body><formmethod="post">请输入您的信息：<inputtype="text" name="name" id="name" class="txt"><inputtype="submit" name="btnSubmit" id="btnSubmit"value="Submit" class="btn"></form></body>
</html>

此时，页面的效果和普通的表单一样，一个输入框加上一个提交的按钮。

添加CSS样式，关键将按钮的背景颜色设置为透明“transparent”，这样，无论页面body的背景色如何变化，按钮的背景色都会跟着改变，然后，将按钮的边框设置为0。

<html><head><title></title><style><!--body{background-color:#daeeff;}form{margin:0px;padding:0px;font:14px;}input{font:14pxArial;}.txt{border-bottom:1pxsolid #005aa7;color:#005aa7;border-top:0px;border-left:0px;border-right:0px;background-color:transparent;}.btn{background-color:transparent;border:0px;}--></style></head><body><formmethod="post">请输入您的信息：<inputtype="text" name="name" id="name"class="txt"><inputtype="submit" name="btnSubmit" id="btnSubmit"value="Submit" class="btn"></form></body>
</html>

可以看到，文本框和按钮的背景色都设置为透明之后，背景色都是页面的背景色，再配合文本框的下划线效果，显得非常自然。

此外，这种将按钮背景色设置为透明，并且，将边框隐藏的思想，和采用<table>标记对页面排版的思路是类似的，都是将元素的边框隐藏了。

CSS设置像文字一样的按钮相关推荐

css设置流光文字样式
css设置流光文字样式主要属性:-webkit-background-clip:text 表示元素的背景保留在前景内容中(文字) 和其形状大小相同 -webkit-text-fill-color:t ...
html同一段文字设置不同颜色字体,CSS设置一个文字两种颜色
CSS设置一个文字两种颜色属于前端实例代码,有关更多实例代码大家可以查看. CSS可以将一个文字设置为两种颜色,下面介绍一下如何实现此效果. 代码实例如下: 犀牛前端部落 .antzone{ disp ...
CSS设置溢出文字显示省略号
CSS设置溢出文字显示省略号相关CSS .text-ellipse{ width: 100px;height:50px;border:2px solid red;overflow:hidden;te ...
h5在Android里文字位置偏下,【CSS】如何解决安卓上按钮文字偏上的问题
比如一个普通的按钮,要做到文字垂直居中按钮 css设置为: a { height: 30px; line-height: 30px; font-size: 14px; text-align: cen ...
css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
CSS设置文字的划线
CSS设置文字的划线文字加上下划线.顶划线和删除线,在文档中是经常使用的. CSS中通过设置文字的text-decoration属性,来实现这些特殊的效果. <span style=" ...
[css] 如何给文字的color设置渐变
[css] 如何给文字的color设置渐变 .text {background: -webkit-linear-gradient(#eee, #333);-webkit-background-clip ...
html如何让图片跟字体重叠,CSS设置图片与文字的间距
[实例介绍] CSS设置图片与文字的间距希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin．top.margin-right,margin-bott ...
css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...

CSS设置像文字一样的按钮

CSS设置像文字一样的按钮相关推荐

最新文章

热门文章