Changing the default button hover color.

adrianmurage — Wed, 24 Mar 2021 08:56:05 +0000

Problem: The default button hover state was disabled when I overrode the default button properties.

I still wanted buttons to get highlighted when someone hovered over them.

Solution 1: I thought I could change the background color using the :hover state. This, however, has a scalability problem since I would need to do this for every single button I had on my project.

Solution 2: Using a brightness() filter to generically highlight content. I found this one on CSS Tricks and it works beautifully.

Here's the code for a sample button:

How to Make a Div Cover the Whole Page with CSS

adrianmurage — Tue, 23 Mar 2021 07:39:42 +0000

Brief Background

I am currently taking the Intro to webdev course on FrontendMasters. My task is to rebuild the iOS calculator in HTML, CSS and JS as described in the open-sourced notes for the course.

I came up with a UI sketch that had my calculator centred on the page like so:

But when I tried it out, I got this:

My code:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>JS Calculator</title>
  </head>
  <body>
    <div class="container">
      <div class="calculator"></div>
    </div>
  </body>
</html>



* {
  box-sizing: border-box;
}

body {
  background-color: #7fffd4;
  border: solid black;
}

.container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.calculator {
  border: solid red;
  height: 600px;
  width: 400px;
}

This was not what I expected.
The container div did not occupy 100% of the page even after assigning it width: 100%; height: 100%. I found this behaviour weird. I then searched dear ol' Google to find out why...

The solution

It turns out there are a few things you need to know to make this work as expected. Lenmor did a great job of taking me through it below:

CSS gotcha: How to fill page with a div?

DEV Community: adrianmurage

Changing the default button hover color.

How to Make a Div Cover the Whole Page with CSS

Brief Background

The solution