怎么设置button的样式
时间: 2023-08-29 13:07:43 浏览: 45
你可以使用CSS来设置button的样式。以下是一个设置button样式的CSS样例:
```css
button {
background-color: #4CAF50; /* 设置背景颜色 */
border: none; /* 去掉边框 */
color: white; /* 设置字体颜色 */
padding: 15px 32px; /* 设置内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去掉下划线 */
display: inline-block; /* 显示为行内元素 */
font-size: 16px; /* 设置字体大小 */
margin: 4px 2px; /* 设置外边距 */
cursor: pointer; /* 鼠标悬停样式为手型 */
}
```
你可以根据自己的需要,修改CSS样式来达到想要的button样式效果。
相关问题
button样式设置颜色
以下是两种设置button样式颜色的方法:
1.使用内联样式设置button颜色
```html
<button style="background-color: red; color: white;">Click me!</button>
```
2.使用CSS样式表设置button颜色
```html
<head>
<style>
.myButton {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<button class="myButton">Click me!</button>
</body>
```
QT ToolButton样式表设置
QT的ToolButton可以通过样式表来设置其外观和状态。
设置ToolButton的背景颜色:
```
QPushButton {background-color: #F0F0F0}
```
设置ToolButton的前景颜色:
```
QPushButton {color: #FFFFFF}
```
设置ToolButton未被点击时的样式:
```
QPushButton:!checked {
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #C5C5C5;
}
```
设置ToolButton被点击时的样式:
```
QPushButton:checked {
background-color: #FFFFFF;
border-style: solid;
border-width: 1px;
border-color: #C5C5C5;
}
```
设置ToolButton禁用时的样式:
```
QPushButton:disabled {
background-color: #D8D8D8;
border-style: solid;
border-width: 1px;
border-color: #C5C5C5;
color: #AAAAAA;
}
```
设置ToolButton鼠标悬停时的样式:
```
QPushButton:hover {
background-color: #E0E0E0;
border-style: solid;
border-width: 1px;
border-color: #C5C5C5;
}
```
以上是一些常见的样式表设置,可以根据需要进行调整。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)