Ejemplo de código de interfaz de usuario de calculadora HTML

531 programme

Abrir en el editor Publica tu código

Ejemplo de código de interfaz de usuario de calculadora HTML

Recomendado

13 May 2026

Código fuente HTML5 del juego Drive Mad

10 December 2025

Juego del círculo perfecto: dibuja y puntúa en HTML Canvas

30 January 2025

Página de inicio de Chef personal

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
body{
background-color: aquamarine;
  display: flex;
    justify-content: center;
    align-items: center;
}
  .di{
    width: 270px;
    background-color: rgb(31, 29, 29);
    height: 400px;

}
  .egale{
        padding: 20px;
    background-color: green;
    border-radius: 20px;
    margin: 5px;
  }
  input{
    width: 250px;
    height: 20px;
    margin: 5px;
  }
  .operation{
    padding: 20px;
    background-color: orange;
    border-radius: 20px;
    margin: 5px;

}
  .efface{
 background-color: red;
 width: 125px;
 border-radius: 20px;
 height: 20px;
  margin: 5px;
  text-align: center;
  }
  button{
    background-color: black;
    color: white;
    padding: 20px;
    border-radius: 20px;
     margin: 5px;
  }
</style>
</head>
<body>
  <div class="di">
  <input type="text" >
  <br>
   <button class="efface">c</button>
   <button class="operation">/</button>
   <button class="operation">*</button>
   <br>
   <button>9</button>
   <button>8</button>
   <button>7</button>
   <button class="operation">+</button>
<br>
   <button>6</button>
   <button>5</button>
   <button>4</button>
   <button class="operation">-</button>
<br>
   <button>3</button>
   <button>2</button>
   <button>1</button>
   <button class="egale">=</button>
<br>
<button>0</button>
<button>.</button>
</div>
</body>
</html>

CSS