Question

我正在尝试创建一个看起来像电话按钮的自定义按钮，其顶部是数字，底部是字母，数字的大小或字体应该大于底部的字母。

这是代码。

HTML
<div id="box3">
    <div class="keys">
        <form name="box">
            <input id="number" name="pick" class="pick" value="" type="text" /><br />

                <span class="clear"><input id="button" type="reset" value="c"></span>
                <span><input id="button" type="button" value="1" onclick="box.pick.value+='1'"></span>
                <span><input id="button" type="button" value="2" onclick="box.pick.value+='2'"></span>
                <span><input id="button" type="button" value="3" onclick="box.pick.value+='3'"></span>
                <span><input id="button" type="button" value="4" onclick="box.pick.value+='4'"></span>
                <span><input id="button" type="button" value="5" onclick="box.pick.value+='5'"></span>
                <span><input id="button" type="button" value="6" onclick="box.pick.value+='6'"></span>
                <span><input id="button" type="button" value="7" onclick="box.pick.value+='7'"></span>
                <span><input id="button" type="button" value="8" onclick="box.pick.value+='8'"></span>
                <span><input id="button" type="button" value="9" onclick="box.pick.value+='9'"></span>
                <span><input id="button" type="button" value="*" onclick="box.pick.value+='*'"></span>
                <span><input id="button" type="button" value="0" onclick="box.pick.value+='0'"></span>
                <span><input id="button" type="button" value="#" onclick="box.pick.value+='#'"></span>

            </form>
        </div>
    </div>

CSS

#button {
    height: 66px;
    width: 70px;
    padding: 2px;
    border-radius: 10px;
    line-height: 40px;
    margin: 0 7px 11px 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #4fbff8;
    color: red;
}

#number {
    height: 30px;
    background: rgba(0, 0, 0, 0.2);
    padding-top: -20px;
    border-radius: 3px;
    box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
    font-size: 17px;
    line-height: 40px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
    margin-bottom: 20px;
}

#box3 {
    height: 380px;
    border: 1px solid #9b9898;
    margin: 4px;
    padding: 20px 20px 9px 0;
    background: linear-gradient(#3df8ed #1bf7d6);
    border-radius: 10px;
    box-shadow: 0px 4px #009de4, 0px 5px 10px rgba(0, 0, 0, 0.2);
}

.span {
    float: left;
    width: 75px;
    height: 70px;
    background: white;
    color: #888;
    box-shadow: 0px 4px #000000;
    user-select: none;
}

感谢。

Answer 1

This might help。为您提供HTML和CSS。

.button {
  width: 100px;
  height: 80px;
  background-color: black;
  margin: 20px;
  display: inline-block;
}
.number {
  color: white;
  display: block;
  text-align: center;
  font-size: 24px;
  padding-top: 10px;
}
.letters {
  display: block;
  text-align: center;
  margin-top: 5px;
}
.letter {
  display: inline;
  padding: 0 5px;
  color: white;
}

<div class="button">
  <span class="number">1</span>
  <div class="letters">
    <span class="letter">a</span>
    <span class="letter">b</span>
    <span class="letter">c</span>
  </div>
</div>

<div class="button">
  <span class="number">2</span>
  <div class="letters">
    <span class="letter">d</span>
    <span class="letter">e</span>
    <span class="letter">f</span>
  </div>
</div>

<div class="button">
  <span class="number">3</span>
  <div class="letters">
    <span class="letter">g</span>
    <span class="letter">h</span>
    <span class="letter">i</span>
  </div>
</div>

如您所说，您可以使用“按钮”类将外部<div>更改为<button>元素，但必须删除浏览器为{{1}提供的更多默认样式} elements。

为此，请查看此帖：CSS remove default blue border

Answer 2

您可以使用此HTML创建一个按钮：

<input type="button" value="5" id="btn5" />

和这个CSS：

#btn5{
width:40px;
background-color:white;
text-align:center;
font-size:14px;
font-weight:bold;
border:2px solid black;
border-radius:5px;
}

如何创建一个看起来像电话按钮的按钮

2 个答案: