生成一个网页,有一个居中的正圆形按钮,文本为:点我变色,点击后按钮在三秒内渐变为蓝宝石色
时间: 2024-06-01 17:10:37 浏览: 8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变色按钮</title>
<style>
#circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="circle">点我变色</div>
<script>
document.getElementById("circle").addEventListener("click", function() {
this.style.transition = "background-color 3s";
this.style.backgroundColor = "#00BFFF";
});
</script>
</body>
</html>
相关问题
Fabric画一个文字内容为text的button按钮,文字内容要在按钮里居中
你可以使用 Fabric.js 的 `fabric.Text` 类创建一个文字元素,并将其作为一个按钮的子元素。然后,你可以设置文本元素的 `textAlign` 属性为 "center",使文本内容在按钮中居中。
以下是一个简单的例子:
```javascript
var button = new fabric.Rect({
width: 100,
height: 50,
fill: '#ccc',
stroke: '#333',
strokeWidth: 2
});
var text = new fabric.Text('Button', {
textAlign: 'center',
fontSize: 20
});
button.add(text);
```
在这个例子中,我们创建了一个矩形按钮,然后创建了一个文本元素,并将它作为按钮的子元素。最后,我们设置文本元素的 `textAlign` 属性为 "center",使文本内容在按钮中居中。
希望这能帮到你!
帮我写一个html返回按钮要求在页面中居中带有一定的圆角效果
当然可以,您需要在您的HTML代码中添加以下类:
.btn-back {
display: block;
margin: 0 auto; /*使其居中*/
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #f2f2f2;
border-radius: 20px; /*添加圆角*/
}
然后在网页中添加一个返回按钮:
<a href="javascript:history.back();" class="btn-back">返回</a>
这样就可以在页面中居中带有圆角效果的返回按钮了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)