在CSS中如何设置一个按钮鼠标划过变颜色。

在CSS中如何设置一个按钮鼠标划过变颜色。,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:button {background-color: #00a7d0}

button:hover {background-color: #ff7701}。

3、浏览器运行index.html页面,此时显示出了蓝色背景颜色按钮

4、将鼠标移入按钮,此时按钮的背景颜色变成了橙色。

给按钮添加css样式有以下三种方法:

1,直接在元素上定义style,如下:

<input type="button" style="这里定义样式">

2,页面中内嵌样式,如下:

<style>

    .btn{需要添加的样式}

</style>

<input type="button" class="btn">

3,外部引用css文件,如下:

<link rel="stylesheet" type="text/css" href="这里是css文件的路径">

你按钮上都没写class类怎么用.button来控制这个按钮的样式呢

你可以用 input[type="button"] {}来选择这个所有的<input type="button" >这些按钮

或者你还想用上面的那种写法,你可以这么改

<input type="button" class="button" name="caigou" id="caigou" value="采购" style="width:50pxheight:50px"/>

<input type="button" class="button" name="xiaoshou" id="xiaoshou" value="销售" />

给每个按钮加上一个button的类这样你就可以用 .button 来控制了

或则楼上的说法也可以,虽然有点烦,按钮的另一种写法是<button>销售</button>如果是这样写的话,就直接用 button{}来控制这个按钮的样式


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11566153.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-17
下一篇2023-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存