按钮压下效果

最新推荐文章于 2024-10-21 21:23:30 发布

荒·原

最新推荐文章于 2024-10-21 21:23:30 发布

阅读量662

点赞数 1

分类专栏： html 文章标签： css按钮压下效果 css按钮

html 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了一个使用HTML和CSS创建按钮的实例，展示了如何定义按钮的样式，包括背景颜色、字体大小、边框圆角等，并解释了按钮在不同状态下的样式变化。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>
<button class="button">Click Me</button>
</body>
</html>