<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
background-color: #f0f0f0;
overflow-y: auto; /* Vertical scrolling */
}
button {
padding: 10px 20px;
font-size: 1.2rem;
cursor: pointer;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
display: block; /* Ensure button takes its own line */
margin: 20px auto; /* Center the button horizontally */
}
button:active {
background-color: #45a049;
}
</style>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Simple Page</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<button id=”interactiveButton”>Click me!</button>
<script src=”script.js”></script>
</body>
</html>
<script>
document.getElementById(‘interactiveButton’).addEventListener(‘click’, function() {
this.textContent = this.textContent === ‘Click me!’ ? ‘Clicked!’ : ‘Click me!’;
});
</script>
What I learned from Copilot and W3Schools?
1, Cursor
I learned we can define what kind of cursor we want in CSS. Removing “cursor: pointer;”, will result in the mouse cursor no longer changing to a hand when hovering over the button. Instead, it will remain the default arrow cursor. This visual cue helps users know that an element is clickable, so omitting it might make the button less intuitive to interact with. If you’re aiming for simplicity or minimalism, that might be fine, but consider the user experience as well.
2, border-radius
This property defines the radius of the element’s corners. Removing border-radius will result in the button losing its rounded corners and becoming rectangular with sharp corners. This might change the visual style and feel of the button, making it look more traditional and less modern. It’s a subtle but impactful change in the overall design.
3, display: block;
This property treats an element as a block-level element. Block-level elements occupy the entire width of their parent element and start on a new line. If I delete it, the button will behave as an inline element. This means that it will not take up the entire width of its parent element, but will be displayed according to the width of its content. It is also possible that it will be aligned on the same line as other elements.
4, overflow-y: auto;
This is a CSS property that specifies that overflow (overflowing) of content in the vertical direction (Y-axis) should be handled automatically. Specifically, if the content exceeds the height of the element, a scroll bar will automatically be displayed. This allows users to scroll and see the entire content even if it overflows in the vertical direction.
At first, I didn’t have this setting, so the top part was cut off and I couldn’t scroll.
5, min-height: 100vh;
This is a CSS property that sets the minimum height of an element to 100% of the view height. 100vh represents the full height of the browser display area. This ensures that the element will at least stretch to the full height of the screen. For example, if you change it to min-height: 50vh;, the minimum height of the element will be set to 50% of the view height. This ensures that the element will be at least half the height of the viewport. If you set it to min-height: 150vh;, the minimum height of the element will be set to 1.5 times the view height, so vertical scrolling will be required.
This image is Line Printer Art, created by Adobe Firefly.