屏幕使用时间程序界面设计 - 黄色的圆形按钮 - 常规

<!DOCTYPE html>
<html>
<head>
<title>屏幕使用时间程序 - 黄色系圆形按钮界面</title>
<style>
body {
background-color: #fff8dc;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
}
<p>h1 {
color: #ffa500;
}</p>
<p>.buttons-container {
display: flex;
justify-content: space-around;
margin-top: 50px;
}</p>
<p>.button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #ffa500;
color: #fff;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}</p>
<p>.button:hover {
background-color: #ffa000;
cursor: pointer;
}
</style></p>
</head>
<body>
<h1>屏幕使用时间</h1>
<div class="buttons-container">
<a href="#" class="button">报告</a>
<a href="#" class="button">设置</a>
<a href="#" class="button">关于</a>
</div>
<script>
// 在这里添加JavaScript代码
</script>
</body>
</html>