CSS设置像文字一样的按钮

最新推荐文章于 2024-08-10 15:24:27 发布

量变决定质变

最新推荐文章于 2024-08-10 15:24:27 发布

阅读量4.5k

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/53152878

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

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>标记对页面排版的思路是类似的，都是将元素的边框隐藏了。