淘先锋技术网

首页 1 2 3 4 5 6 7

CSS是网页设计中常用的技术,它可以很好地控制网页的样式,让网页看起来更加美观。在网页中经常会使用按钮,而CSS可以很好地控制按钮的样式。下面我来介绍一下CSS如何写按钮样式。

/*定义按钮的样式*/
button{
width:100px; /*按钮宽度*/
height:30px; /*按钮高度*/
font-size:14px; /*字体大小*/
border-radius:5px; /*圆角半径*/
background:#4CAF50; /*背景颜色*/
color:#fff; /*字体颜色*/
border:none; /*边框*/
cursor:pointer; /*鼠标指针*/
}
/*给按钮添加鼠标悬停效果*/
button:hover{
background:#3e8e41; /*鼠标悬停时的背景颜色*/
}
/*给按钮添加鼠标按下效果*/
button:active{
background:#3e8e41; /*鼠标按下时的背景颜色*/
transform:translateY(2px); /*向下移动2px*/
}

以上代码定义了一个按钮的基本样式,以及鼠标悬停和按下时的效果。在代码中,我们使用了border-radius属性来定义按钮的圆角半径,让按钮看起来更加圆润。同时,我们使用background属性设置按钮的背景颜色,使用color属性设置按钮的字体颜色。这样,我们就可以很容易地根据自己的需求来定义按钮的样式了。