HTML设置悬停效果,如何使用纯CSS实现按钮的悬停效果

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义dom，容器是一个无序列表，包含4个元素，代表4个按钮：

• home
• products
• services
• contact

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:cornsilk;

}

去掉列表项前面的符号：

ul{

padding:0;

list-style-type:none;

}

设置按钮的边框和背景的样式，背景采用渐变色，但渐变的方向依次交替：

ulli{

box-sizing:border-box;

width:15em;

height:3em;

font-size:20px;

border-radius:0.5em;

margin:0.5em;

box-shadow:001emrgba(0,0,0,0.2);

}

ulli:nth-child(odd){

background:linear-gradient(toright,orange,tomato);

}

ulli