Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Magnetic Button Hover Effect using HTML & CSS

    6 October 2025

    How to make Animated Electric Card using HTML & CSS

    4 October 2025

    How to make Next Level Electric Button Animation using HTML & CSS

    2 October 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - HTML & CSS - How to make Old Aesthetic Calculator using HTML & CSS
    HTML & CSS

    How to make Old Aesthetic Calculator using HTML & CSS

    Coding StellaBy Coding Stella12 January 2024Updated:13 January 2024No Comments5 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Hey everyone, let’s take a trip down memory lane in today’s coding session! We’ll be creating an Old Aesthetic Calculator using just HTML and CSS. No need for anything fancy – just simple coding to bring back that classic, nostalgic vibe.

    In this tutorial, we’re not just building a calculator; we’re embracing the charm of old-school aesthetics. Whether you’re a seasoned coder or just starting out, this is a great opportunity to have some fun with your skills and create a calculator with a vintage touch.

    Join me on this laid-back coding journey into the world of Old Aesthetic Calculators. Let’s keep it simple with HTML and CSS, creating something functional and infused with a touch of vintage charm. Ready to add a bit of old-school flair to your projects? Let’s get started on our Old Aesthetic Calculator adventure – the HTML and CSS way!

    HTML :

    The provided code is an HTML document that represents an old aesthetic calculator. It consists of a form with an input field and various buttons representing numbers, mathematical operators, and a clear button. The calculator allows users to perform basic arithmetic operations and displays the result in the input field when the equal button is clicked. The design of the calculator has an old-fashioned aesthetic.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Old Aesthetic Calculator</title>
      <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Courier+Prime&amp;display=swap'><link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <form action="" name="calc" class="calculator">
        <input type="text" class="value" readonly name="txt" />
        <span class="num clear" onclick="calc.txt.value=''"><i>C</i></span>
        <span class="num" onclick="calc.txt.value+='/'"><i>/</i></span>
        <span class="num" onclick="calc.txt.value+='*'"><i>*</i></span>
        <span class="num" onclick="calc.txt.value+='7'"><i>7</i></span>
        <span class="num" onclick="calc.txt.value+='8'"><i>8</i></span>
        <span class="num" onclick="calc.txt.value+='9'"><i>9</i></span>
        <span class="num" onclick="calc.txt.value+='-'"><i>-</i></span>
        <span class="num" onclick="calc.txt.value+='4'"><i>4</i></span>
        <span class="num" onclick="calc.txt.value+='5'"><i>5</i></span>
        <span class="num" onclick="calc.txt.value+='6'"><i>6</i></span>
        <span class="num plus" onclick="calc.txt.value+='+'"><i>+</i></span>
        <span class="num" onclick="calc.txt.value+='1'"><i>1</i></span>
        <span class="num" onclick="calc.txt.value+='2'"><i>2</i></span>
        <span class="num" onclick="calc.txt.value+='3'"><i>3</i></span>
        <span class="num" onclick="calc.txt.value+='0'"><i>0</i></span>
        <span class="num" onclick="calc.txt.value+='00'"><i>00</i></span>
        <span class="num" onclick="calc.txt.value+='.'"><i>.</i></span>
    
        <span class="num equal" onclick="document.calc.txt.value=eval(calc.txt.value)"><i>=</i></span>
      </form>
    </div>
    <!-- partial -->
      
    </body>
    </html>

    CSS :

    The provided CSS code styles the old aesthetic calculator. It sets the font family to “Courier Prime” and applies a dark background color to the body. The container element represents the calculator’s layout and is styled with padding, border-radius, and box-shadow to create a 3D effect. The span elements represent the calculator buttons and are styled with background gradients, box-shadow, and border-radius. The active state of the buttons is highlighted with a brightness filter. The calculator’s display input field is styled with a background color, border, and box-shadow. The clear and equal buttons have specific styles for their appearance.

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Courier Prime", monospace;
    }
    body {
      display: flex;
      height: 100vh;
      align-items: center;
      justify-content: center;
      background-color: #202020;
    }
    .container {
      position: relative;
      min-width: 300px;
      min-height: 400px;
      padding: 40px 30px 30px;
      border-radius: 20px;
      box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),
        10px 10px 70px rgba(0, 0, 0, 0.25), inset -5px -5px 15px rgba(0, 0, 0, 0.25),
        inset 5px 5px 15px rgba(0, 0, 0, 0.25);
    }
    .container span {
      color: #fff;
      position: relative;
      display: grid;
      width: 80px;
      place-items: center;
      margin: 8px;
      height: 80px;
      background: linear-gradient(180deg, #2f2f2f, #3f3f3f);
      box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15),
        inset 0 -8px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(0, 0, 0, 0.75),
        10px 20px 25px rgba(0, 0, 0, 0.4);
      user-select: none;
      cursor: pointer;
      font-weight: 400;
      border-radius: 10px;
    }
    .calculator span:active {
      filter: brightness(1.5);
    }
    .calculator span::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 4px;
      bottom: 14px;
      right: 12px;
      border-radius: 10px;
      background: linear-gradient(90deg, #2d2d2d, #4d4d4d);
      box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1),
        10px 5px 10px rgba(0, 0, 0, 0.15);
      border-left: 1px solid #0004;
      border-bottom: 1px solid #0004;
      border-top: 1px solid #0009;
    }
    .calculator span i {
      position: relative;
      font-style: normal;
      font-size: 1.5em;
      text-transform: uppercase;
    }
    .calculator {
      position: relative;
      display: grid;
    }
    .calculator .value {
      position: relative;
      grid-column: span 4;
      height: 100px;
      width: calc(100% - 20px);
      left: 10px;
      border: none;
      outline: none;
      background-color: #a7af7c;
      margin-bottom: 10px;
      border-radius: 10px;
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.75);
      text-align: right;
      padding: 10px;
      font-size: 2em;
    }
    .calculator .clear {
      grid-column: span 2;
      width: 180px;
      background: #f00;
    }
    .calculator .clear::before {
      background: linear-gradient(90deg, #d20000, #ffffff5c);
      border-left: 1px solid #fff4;
      border-bottom: 1px solid #fff4;
      border-top: 1px solid #fff4;
    }
    .calculator .plus {
      grid-row: span 2;
      height: 180px;
    }
    .calculator .equal {
      background: #2196f3;
    }
    .calculator .equal::before {
      background: linear-gradient(90deg, #1479c9, #ffffff5c);
      border-left: 1px solid #fff4;
      border-bottom: 1px solid #fff4;
      border-top: 1px solid #fff4;
    }

    There you have it – our Old Aesthetic Calculator is all set and ready to go! We’ve taken a nostalgic trip, keeping it simple with HTML and CSS. Whether you’re a coding pro or just getting started, this project is a fun way to infuse a touch of vintage charm into your web creations.

    If your project hits a snag, no worries! Access the source code effortlessly. Click the Download button to kickstart your coding expedition. May your coding be filled with joy!

    Calculator
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Website with Login & Signup form using HTML CSS & JavaScript
    Next Article How to make Hoverable Sidebar Menu using HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to make Animated Electric Card using HTML & CSS

    4 October 2025
    HTML & CSS

    How to make Next Level Electric Button Animation using HTML & CSS

    2 October 2025
    HTML & CSS

    How to make Animated Chair Product Page using HTML & CSS

    30 September 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202429K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202426K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202421K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202414K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make Simple Calculator using HTML CSS & JavaScript

    3 September 2024

    How to make Magic Animated Motion Button using HTML & CSS

    15 September 2025

    How to create a web page with HTML ?

    26 January 2024

    How to Make Analog clock using HTML CSS & JavaScript

    13 December 2023
    Latest Post

    How to make Magnetic Button Hover Effect using HTML & CSS

    6 October 2025

    How to make Animated Electric Card using HTML & CSS

    4 October 2025

    How to make Next Level Electric Button Animation using HTML & CSS

    2 October 2025

    How to make Animated Chair Product Page using HTML & CSS

    30 September 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood