Hi. I’m trying to recreate a Flash timer in HTML5/CSS/javascript and have got so far: http://gandalf458.co.uk/timers/
My first problem is that I want all the buttons the same width, but if I make them inline-block and assign them a width I get other problems. There are 3 buttons but only 2 are displayed at the same time. Any ideas, guys? Thx
My CSS is:
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
.timer {
display: inline-block;
padding: 15px;
border: 1px solid black;
}
.timer p {
text-align: center;
padding: 0;
margin: 0 0 15px;
font-size: 14px;
font-weight: bold;
}
.button {
display: inline;
}
#btnStart, #btnStop, #btnReset {
padding: 4px 20px;
color: black;
font-weight: bold;
text-decoration: none;
text-align: center;
border-radius: 5px;
}
#btnStart {
background: #66CC22;
background: linear-gradient(to bottom, #ffffff 0%,#66CC22 100%);
border: 1px solid #66CC22;
}
#btnStart:hover {
background: #ffffff;
background: linear-gradient(to bottom, #66CC22 0%,#ffffff 100%);
}
#btnStop {
background: #E41910;
background: linear-gradient(to bottom, #ffffff 0%,#E41910 100%);
border: 1px solid #E41910;
}
#btnStop:hover {
background: #ffffff;
background: linear-gradient(to bottom, #E41910 0%,#ffffff 100%);
}
#btnReset {
background: #E46E0B;
background: linear-gradient(to bottom, #ffffff 0%,#E46E0B 100%);
border: 1px solid #E46E0B;
}
#btnReset:hover {
background: #ffffff;
background: linear-gradient(to bottom, #E46E0B 0%,#ffffff 100%);
}
.hide {
display: none;
}