Home >Web Front-end >JS Tutorial >Future of Calculator ui using html css and javascript.

Future of Calculator ui using html css and javascript.

Mary-Kate OlsenOriginal: 2024-12-14 16:56:15754browse

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

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!

JavaScript css html Filter using operator pointer display margin padding border viewport background transform transition flex ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the Prototyping and Closure Ways to Create Custom Objects in JavaScript?Next article：What are the Prototyping and Closure Ways to Create Custom Objects in JavaScript?

See more

Future of Calculator ui using html css and javascript.

Related articles