图片/按钮上的文字 [英] Text over the image/button

问题描述

例如：我有一个按钮（登录按钮）。我希望文本登录放置在该按钮上。

解决方案

试试这个，

$ b $这个文本应该是图片/按钮的中心。 b

HTML代码：

 < input type =submitvalue =Loginclass =myButton/ > 
  

CSS：

  .myButton {
 background-color：＃44c767; 
 border-radius：28px; 
 border：1px solid＃18ab29; 
 display：inline-block; 
光标：指针; 
 color：#ffffff; 
 font-family：Arial; 
 font-size：17px; 
 padding：16px 31px; 
 text-decoration：none; 
 text-shadow：0px 1px 0px＃2f6627; 
} 
 .myButton：hover {
 background-color：＃5cbf2a; 
} 
 .myButton：active {
 position：relative; 
 top：1px; 
} 
  

How to make text over the image/button using html/css.

Eg: I have a button(Login Button). I want the text "Login" to be placed over that button. The text should be center of the image/button.

解决方案

Try this,

HTML Code:

<input type="submit" value="Login" class="myButton"/>

CSS:

.myButton {
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}

这篇关于图片/按钮上的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！