Future of Calculator ui using html css and javascript.-JS Tutorial-php.cn

Future of Calculator ui using html css and javascript.

Mary-Kate Olsen

Release： 2024-12-14 16:56:15

Original

754 people have browsed it

Future of Calculator ui using html css and javascript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neon Glass Calculator</title>
  <style>
   *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   }
   body{
    font-family: "Poppins",sans-serif;
    background: linear-gradient(135deg, #000428, #004e92);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .calculator{
    background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 20px;
      width: 350px;
      max-width: 90%;

   }

   .display {
      background: rgba(255, 255, 255, 0.2);
      box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.5);
      color: #fff;
      font-size: 2.5rem;
      text-align: right;
      padding: 20px 10px;
      border-radius: 10px;
      margin-bottom: 20px;
    }
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
    }
    button {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4), 0 0 10px rgba(0, 255, 255, 0.7) inset;
      color: #fff;
      font-size: 1.5rem;
      padding: 20px;
      border-radius: 12px;
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
    }

    button:active {
      transform: scale(0.95);
      box-shadow: 0 4px 25px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 1) inset;
    }
    button.operator {
      background: rgba(255, 255, 255, 0.2);
      color: #00ffff;
      box-shadow: 0 4px 15px rgba(255, 165, 0, 0.5), 0 0 10px rgba(255, 165, 0, 0.7) inset;
    }

    button.operator:active {
      box-shadow: 0 4px 25px rgba(255, 165, 0, 0.7), 0 0 15px rgba(255, 165, 0, 1) inset;
    }


















  </style>
</head>
<body>
  <div>

Copy after login

The above is the detailed content of Future of Calculator ui using html css and javascript.. For more information, please follow other related articles on the PHP Chinese website!