Windows 98-style boxes!

In this page I'll share the code for making windows 98-style boxes like the one I use for this site! I'll also share links and resources on other ways to make a webpage look like windows 98!

Box Code

Here's an example below of what the box would look like. Hover over a section to see a short explanation! For mobile users, you may click on the details elements to see the explanations.

Title Here

My slave human didn't give me any food so i pooped on the floor. Cats secretly make all the worlds muffins rub face on owner. Get my claw stuck in the dog's ear jump five feet high and sideways when a shadow moves meow meow pee in shoe for flex claws on the human's belly and purr like a lawnmower. So you're just gonna scroll by without saying meowdy? chase mice attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?

Titlebar

This text in the titlebar code is an h1 tag so it's still identifiable as a heading. For the buttons section I used simple text symbols to make them look like the minimize, maximize, and close buttons.

Content

This is an editable section where you can put any of the main content in!

Buttons

This is an optional part of the box, which you may use for links, navigation, etc. You can add more buttons if you'd like!

Copy the html below: (I've also included some invisible comments on how to use!)

<div class="window">
  <!--you may also change the <div> tag here to other tags like article, section, header, etc! It also helps for easier changing of code so you don't get bombarded with a (insert self referential joke) bunch of *</div>s*-->
  <div class="titlebar">
    <div class="title">
      <h1>Title Here</h1><!--edit the text here to change the title!-->
    </div>
    <div class="buttons">
      <button>_</button>
      <button>[  ]</button>
      <button>X</button>
    </div>
  </div>
  <div class="stuff">
    <p>My slave human didn't give me any food so i pooped on the floor. Cats secretly make all the worlds muffins rub face on owner. Get my claw stuck in the dog's ear jump five feet high and sideways when a shadow moves meow meow pee in shoe for flex claws on the human's belly and purr like a lawnmower. So you're just gonna scroll by without saying meowdy? chase mice attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?</p>
  </div>
  <div class="btmbtn"><!--you may edit this out if not needed!-->
    <button onclick="window.location.href='http://www.catipsum.com/index.php';">link to cat ipsum</button>
  </div>
</div>

Now here is the CSS: (there are also comments on how to use!)

button{
  border-bottom:2px solid gray; 
  border-right:2px solid gray;
  border-left:2px solid white;
  border-top:2px solid white;
  outline:0.5px black outset;
  background-color:lightgray;
  padding:3px;
  font-family:"timesnewpixelmedium",serif; /*change the font name to something else, preferably a bitmap font*/
  display:inline-block;
  text-align:center;
  font-size:1rem;
}

button:active{
  border-bottom:2px solid white;
  border-right:2px solid white;
  border-left:2px solid gray;
  border-top:2px solid gray;
  outline:0.5px black inset;
}

button:focus, button:hover{
  outline:0.5px black dotted;
  outline-offset:-4px;
}

.window{
  border-bottom:4px solid gray;
  border-right:4px solid gray;
  border-left:4px solid white;
  border-top:4px solid white;
  outline:1px black outset;
  box-sizing:border-box;
  margin:0 auto;
  background-color:lightgray;
  margin-bottom:20px;
  max-width:500px;
}

.titlebar{
  padding:3px;
  background: linear-gradient(90deg,steelblue,teal); /*you may edit the colors here and replace with an html colr name or hex code!*/
  height:auto;
  justify-content: space-between;
  align-items:right;
  display:flex;
}
.titlebar button{
  width:25px;
  font-size:0.7rem;
}
.title{
  display:inline;
  width:60%;
  word-wrap:break-word;
  padding-left:15px;
}
.title h1{
  color:white;
  text-shadow:1.5px 1.5px 0px gray;
  display:inline;
}

.buttons{
  display:inline;
  position:relative;
  align-items:right;
  justify-content: space-between;
  margin:5px;
}

.stuff{
  padding:15px;
}

.btmbtn{
  padding:5px;
  margin-bottom:10px;
  margin-right:10px;
  text-align:right;
}

.btmbtn button{
  padding-left:10px;
  padding-right:10px;
}

.btmbtn button:focus{
  outline:0.5px black dotted;
  outline-offset:-4px;
}

More resources

Here are more css and html tricks for getting that Windows 98 look on a webpage!

98.css - design system dedicated to looking like win98
convincing looking 90s fonts on modern browsers
collection of fonts made with the pentacom bitfont maker