1

I am trying to create a customized button that looks like a telephone button with the numbers at the top and the alphabet at the bottom and the size or the font of the number should be bigger than the alphabet at the bottom.

Here is the code.

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;
}

Thanks.

Temidayo Abayomi-Zannu
  • 13
  • 3

2 Answers2

2

This might help. Provided HTML and CSS for you.

.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>

You can change the outer <div>s with a class of "button" to <button> elements as you say, but will have to remove some more default styles the browser will give to <button> elements.

To do that, check out this post: CSS remove default blue border

Community
  • 1
  • 1
Alex
  • 5,298
  • 4
  • 29
  • 34
  • Thanks, that really helped. but is there a way to use the

    2

    ABC ?     – Temidayo Abayomi-Zannu Nov 02 '14 at 09:52
  • Sure, you just have to style those elements instead of the ones I wrapped the numbers and letters in. With HTML there are no "rules" though, you can wrap your content in any tag that ends up suiting your need. I don't see the need to use

    and s unless it's required for other reasons.

     – Alex Nov 02 '14 at 20:40
1

you can create a button by using this HTML:

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

and this CSS:

#btn5{
width:40px;
background-color:white;
text-align:center;
font-size:14px;
font-weight:bold;
border:2px solid black;
border-radius:5px;
}
Syed Muhammad Zeeshan
  • 1,027
  • 7
  • 16