Вытесненные кнопки калькулятора

Я хочу, чтобы кнопки на моем калькуляторе были выдавленными, вот так: Вытесненные кнопки калькулятора

и отступ при нажатии (а затем снова отступ при отпускании)

вот мой код: (размер всего странный из-за небольшого ящика, в котором вы запускаете код, не совсем уверен, что с этим делать, но я думаю, вы все еще можете мне помочь?)

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
  <script language = "javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script language = "javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    
    #divcontainer {
      border: 1px solid lightgray;
      width: 100% height: 100%
    }
    
    #makeitmove {
      background: lightgray;
      resize: both;
      overflow: auto;
      text-align: center;
      width: 450px;
      height: 76px;
      min-height: 70%;
      min-width: 25%;
      border: 1px solid grey;
      box-sizing: content-box;
    }
    
    #drag {
      font-size: 30px;
      height: 45px;
      width: 100%;
      background: blue;
      border: 1px solid grey;
      box-sizing: content-box;
    }
  </style>
  <script>
    $(document).ready(function() {
      $("#makeitmove").draggable({
        containment: "#divcontainer",
        handle: '#drag',
        scroll: false
      });
    });
  </script>
</head>

<body>
  <div id = "divcontainer" style = "height: 100vh;">
    <div id = "makeitmove">
      <div id = "drag">Calculator</div>
      <h1>JavaScript Calculator</h1>
      <p class = "warning">Don't divide by zero</p>

      <div id = "calculator" class = "calculator">

        <button id = "clear" class = "clear">C</button>

        <div id = "viewer" class = "viewer">0</div>

        <button class = "num" data-num = "7">7</button>
        <button class = "num" data-num = "8">8</button>
        <button class = "num" data-num = "9">9</button>
        <button data-ops = "plus" class = "ops">+</button>

        <button class = "num" data-num = "4">4</button>
        <button class = "num" data-num = "5">5</button>
        <button class = "num" data-num = "6">6</button>
        <button data-ops = "minus" class = "ops">-</button>

        <button class = "num" data-num = "1">1</button>
        <button class = "num" data-num = "2">2</button>
        <button class = "num" data-num = "3">3</button>
        <button data-ops = "times" class = "ops">*</button>

        <button class = "num" data-num = "0">0</button>
        <button class = "num" data-num = ".">.</button>
        <button id = "equals" class = "equals" data-result = "">=</button>
        <button data-ops = "divided by" class = "ops">/</button>
      </div>

      <button id = "reset" class = "reset">Reset Universe?</button>
      <style>
        html {}
        
        body {
          color: #6cacc5;
          font: 300 18px/1.6 "Source Sans Pro", sans-serif;
          margin: 0;
          background: linear-gradient(purple, blue);
          text-align: center;
        }
        
        h1 {
          font-weight: 300;
          margin: 0;
        }
        /* Gradient text only on Webkit */
        
        .warning {
          background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: #8c5059;
          font-weight: 30px;
          margin: 0;
        }
        
        .calculator {
          font-size: 28px;
          margin: 0 auto;
          width: 10em;
          &::before,
          &::after {
            content: " ";
            display: table;
          }
          &::after {
            clear: both;
          }
        }
        /* Calculator after dividing by zero */
        
        .broken {
          animation: broken 2s;
          transform: translate3d(0, -2000px, 0);
          opacity: 0;
        }
        
        .viewer {
          color: #c97874;
          float: left;
          line-height: 3em;
          text-align: right;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 7.5em;
          height: 3em;
        }
        
        button {
          border: 0;
          background: rgba(42, 50, 113, .28);
          color: black;
          cursor: pointer;
          margin: 0;
          width: 27.5%;
          height: 2.5vh;
          transition: all 0.5s;
          &:hover {
            background: #201e40;
          }
          &:focus {
            outline: 0; // Better check accessibility
            /* The value fade-ins that appear */
            &::after {
              animation: zoom 1s;
              animation-iteration-count: 1;
              animation-fill-mode: both; // Fix Firefox from firing animations only once
              content: attr(data-num);
              cursor: default;
              font-size: 100px;
              position: absolute;
              top: 1.5em;
              left: 50%;
              text-align: center;
              margin-left: -24px;
              opacity: 0;
              width: 48px;
            }
          }
        }
        /* Same as above, modified for operators */
        
        .ops:focus::after {
          content: attr(data-ops);
          margin-left: -210px;
          width: 420px;
        }
        /* Same as above, modified for result */
        
        .equals:focus::after {
          content: attr(data-result);
          margin-left: -300px;
          width: 600px;
        }
        /* Reset button */
        
        .reset {
          background: rgba(201, 120, 116, .28);
          color: #c97874;
          font-weight: 400;
          margin-left: -77px;
          padding: 0.5em 1em;
          position: absolute;
          top: -20em;
          left: 50%;
          width: auto;
          height: auto;
          &:hover {
            background: #c97874;
            color: #100a1c;
          }
          /* When button is revealed */
          &.show {
            top: 20em;
            animation: fadein 4s;
          }
        }
        /* Animations */
        /* Values that appear onclick */
        
        @keyframes zoom {
          0% {
            transform: scale(.2);
            opacity: 1;
          }
          70% {
            transform: scale(1);
          }
          100% {
            opacity: 0;
          }
        }
        /* Division by zero animation */
        
        @keyframes broken {
          0% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
          }
          5% {
            transform: rotate(5deg);
          }
          15% {
            transform: rotate(-5deg);
          }
          20% {
            transform: rotate(5deg);
          }
          25% {
            transform: rotate(-5deg);
          }
          50% {
            transform: rotate(45deg);
          }
          70% {
            transform: translate3d(0, 2000px, 0);
            opacity: 1;
          }
          75% {
            opacity: 0;
          }
          100% {
            transform: translate3d(0, -2000px, 0);
          }
        }
        /* Reset button fadein */
        
        @keyframes fadein {
          0% {
            top: 20em;
            opacity: 0;
          }
          50% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }
        
        @media (min-width: 420px) {
          .calculator {
            width: 12em;
          }
          .viewer {
            width: 8.5em;
          }
          button {
            margin: 0.5em;
          }
        }
      </style>
      <script>
        /*
        TODO:
            Limit number input
            Disallow . from being entered multiple times
            Clean up structure
        */

        (function() {
          "use strict";

          // Shortcut to get elements
          var el = function(element) {
            if (element.charAt(0) === "#") { // If passed an ID...
              return document.querySelector(element); // ... returns single element
            }

            return document.querySelectorAll(element); // Otherwise, returns a nodelist
          };

          // Variables
          var viewer = el("#viewer"), // Calculator screen where result is displayed
            equals = el("#equals"), // Equal button
            nums = el(".num"), // List of numbers
            ops = el(".ops"), // List of operators
            theNum = "", // Current number
            oldNum = "", // First number
            resultNum, // Result
            operator; // Batman

          // When: Number is clicked. Get the current number selected
          var setNum = function() {
            if (resultNum) { // If a result was displayed, reset number
              theNum = this.getAttribute("data-num");
              resultNum = "";
            } else { // Otherwise, add digit to previous number (this is a string!)
              theNum += this.getAttribute("data-num");
            }

            viewer.innerHTML = theNum; // Display current number

          };

          // When: Operator is clicked. Pass number to oldNum and save operator
          var moveNum = function() {
            oldNum = theNum;
            theNum = "";
            operator = this.getAttribute("data-ops");

            equals.setAttribute("data-result", ""); // Reset result in attr
          };

          // When: Equals is clicked. Calculate result
          var displayNum = function() {

            // Convert string input to numbers
            oldNum = parseFloat(oldNum);
            theNum = parseFloat(theNum);

            // Perform operation
            switch (operator) {
              case "plus":
                resultNum = oldNum + theNum;
                break;

              case "minus":
                resultNum = oldNum - theNum;
                break;

              case "times":
                resultNum = oldNum * theNum;
                break;

              case "divided by":
                resultNum = oldNum / theNum;
                break;

                // If equal is pressed without an operator, keep number and continue
              default:
                resultNum = theNum;
            }

            // If NaN or Infinity returned
            if (!isFinite(resultNum)) {
              if (isNaN(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators
                resultNum = "You broke it!";
              } else { // If result is infinity, set off by dividing by zero
                resultNum = "Look at what you've done";
                el('#calculator').classList.add("broken"); // Break calculator
                el('#reset').classList.add("show"); // And show reset button
              }
            }

            // Display result, finally!
            viewer.innerHTML = resultNum;
            equals.setAttribute("data-result", resultNum);

            // Now reset oldNum & keep result
            oldNum = 0;
            theNum = resultNum;

          };

          // When: Clear button is pressed. Clear everything
          var clearAll = function() {
            oldNum = "";
            theNum = "";
            viewer.innerHTML = "0";
            equals.setAttribute("data-result", resultNum);
          };

          /* The click events */

          // Add click event to numbers
          for (var i = 0, l = nums.length; i < l; i++) {
            nums[i].onclick = setNum;
          }

          // Add click event to operators
          for (var i = 0, l = ops.length; i < l; i++) {
            ops[i].onclick = moveNum;
          }

          // Add click event to equal sign
          equals.onclick = displayNum;

          // Add click event to clear button
          el("#clear").onclick = clearAll;

          // Add click event to reset button
          el("#reset").onclick = function() {
            window.location = window.location;
          };

        }());
      </script>
    </div>

  </div>
</body>

</html>

Thanks in advance for any help! :)

Расположение кнопок - это кошмар. D: В любом случае, давайте посмотрим, что мы можем сделать. Единственное, что вас волнует, это стиль кнопки, верно? Потому что я вижу некоторые другие проблемы с пользовательским интерфейсом, например, при нажатии кнопки не отображается заголовок.

— 09.08.2018 03:32

javascript html css

09.08.2018 03:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

332

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Задайте границы кнопок и сделайте border-styleoutset (или inset в их псевдоклассе :active):

.out {
  border-style: outset;
}

.in {
  border-style: inset;
}

<h2 class = "out">Borders can give the illusion of depth</h2>
<h2 class = "in">In either direction</h2>

Кроме того, веб-браузеры понимают только язык таблиц стилей - это CSS. Вам нужно будет скомпилировать свои таблицы стилей, прежде чем использовать их в подобном фрагменте.

09.08.2018 04:38

Ответ принят как подходящий

Требуется небольшая модификация внутренней структуры кнопки. Я увеличил масштаб крышки экрана, обнаружил, что классическая кнопка темы Windows имеет 3 слоя границы Это решение использует границу псевдоэлемента, саму границу кнопки и границу вложенного диапазона для достижения эффекта.

body {
  background-color: rgb(192, 192, 192);
}

/* button normal style */

button.classic {
  min-width: 80px;
  background-color: rgb(192, 192, 192);
  border-top: 1px solid rgb(223, 223, 223);
  border-left: 1px solid rgb(223, 223, 223);
  border-bottom: 1px solid rgb(128, 128, 128);
  border-right: 1px solid rgb(128, 128, 128);
  position: relative;
  padding: 0;
  margin: 4px;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

/*  pseudo-element for outer border */

button.classic::before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: -2px;
  left: -2px;
  height: 100%;
  width: 100%;
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
}

/* button when focused */

button.classic:focus {
  outline: 0;
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

/* outer border when focused*/

button.classic:focus::before {
  border: 2px solid black;
}

/* span for inner border */

button.classic span {
  display: block;
  padding: 2px 16px;
  border: 1px solid rgb(192, 192, 192);
}

/* inner border when focused */

button.classic:focus span {
  border-top: 1px solid rgb(223, 223, 223);
  border-left: 1px solid rgb(223, 223, 223);
  border-bottom: 1px solid rgb(128, 128, 128);
  border-right: 1px solid rgb(128, 128, 128);
}

/* button when focused */

button.classic:active {
  border: 1px solid rgb(128, 128, 128);
}

/* button when pressed */

button.classic:active span {
  border: 1px solid rgb(192, 192, 192);
}

/* button label when pressed */

button.classic:active span label {
  position: relative;
  top: 1px;
  left: 1px;
}

<button class='classic'>
  <span><label>OK</label></span>
</button>

<button class='classic'>
  <span><label>Cancel</label></span>
</button>

09.08.2018 04:50

Вы можете попробовать это:

body {
    background-color: #d3d2d2;
}

button {
    cursor: pointer;
    margin: 0;
    width: 27.5%;
    height: 32px;
    transition: linear 200ms;
    font-size: 20px;
    font-weight: 500;
    background-color: #c1c1c0;
    box-shadow: 0px 0px 3px #a0a0a0;
    outline: none;
    border: 2px solid;
    border-top-color: #ddd;
    border-left-color: #ddd;
    border-bottom-color: #888;
    border-right-color: #888;
    color: #4b4a4a;
 }
 button:focus {
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
 }