纯CSS斜角渐变按钮悬停效果

小鱼儿 2023-10-14 14:30 42阅读 0赞

纯CSS斜角渐变按钮悬停效果

![在这里插入图片描述][300e01ce85ae438281ecdab08579cffb.gif_pic_center]

<ul>
      <li>home</li>
      <li>products</li>
      <li>services</li>
      <li>contact</li>
    </ul>

body {
        
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: cornsilk;
    }
    
    ul {
        
        padding: 0;
        list-style-type: none;
    }
    
    ul li {
        
        box-sizing: border-box;
        width: 15em;
        height: 3em;
        font-size: 20px;
        border-radius: 0.5em;
        margin: 0.5em;
        box-shadow: 0 0 1em rgba(0,0,0,0.2);
        color: white;
        font-family: sans-serif;
        text-transform: capitalize;
        line-height: 3em;
        transition: 0.3s;
        cursor: pointer;
    }
    
    ul li:nth-child(odd) {
        
        background: linear-gradient(to right, orange, tomato);
        text-align: left;
        padding-left: 10%;
        transform: perspective(500px) rotateY(45deg);
    }
    
    ul li:nth-child(even) {
        
        background: linear-gradient(to left, orange, tomato);
        text-align: right;
        padding-right: 10%;
        transform: perspective(500px) rotateY(-45deg);
    }
    
    ul li:nth-child(odd):hover {
        
        transform: perspective(200px) rotateY(45deg);
        padding-left: 5%;
    }
    
    ul li:nth-child(even):hover {
        
        transform: perspective(200px) rotateY(-45deg);
        padding-right: 5%;
    }

### 感谢您的阅读❤️！ ###

[300e01ce85ae438281ecdab08579cffb.gif_pic_center]: https://img-blog.csdnimg.cn/300e01ce85ae438281ecdab08579cffb.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS卡片渐变悬停效果

HTML 代码 <div class="card"> <div class="content"> <p class="heading">C

痛定思痛。/ 2023年10月14日 14:31/ 0 赞/ 51 阅读

相关纯CSS斜角渐变按钮悬停效果

纯CSS斜角渐变按钮悬停效果 ![在这里插入图片描述][300e01ce85ae438281ecdab08579cffb.gif_pic_center] <ul>

小鱼儿/ 2023年10月14日 14:30/ 0 赞/ 43 阅读

相关开始使用 CSS 按钮悬停效果

开始使用 CSS 按钮悬停效果 ![在这里插入图片描述][eff0bc8b0eb247d797a70870d980d7ec.gif_pic_center] HTML 代码

系统管理员/ 2023年10月14日 14:30/ 0 赞/ 47 阅读

相关 CSS 蝙蝠侠按钮悬停效果

CSS 蝙蝠侠按钮悬停效果 ![在这里插入图片描述][22df46cef9cc490dae5e71d5fe158530.gif_pic_center] HTML 代码

桃扇骨/ 2023年10月14日 14:30/ 0 赞/ 48 阅读

相关 css 马赛克悬停效果

css 马赛克悬停效果 ![在这里插入图片描述][20210418202508192.gif_pic_center] <!DOCTYPE html> <

布满荆棘的人生/ 2023年01月13日 10:56/ 0 赞/ 163 阅读

相关 109.现代CSS按钮悬停效果

效果 (源码网盘地址在最后) ![c103c7135cddddb466596e59fa44fe26.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

雨点打透心脏的1/2处/ 2022年12月23日 00:56/ 0 赞/ 133 阅读

相关 html鼠标悬停按钮效果,纯css3实现的鼠标悬停动画按钮

今天给大家带来一款纯css3实现的鼠标悬停动画按钮。这款按钮鼠标经过前以正方形的形式，当鼠标经过的时候以动画的形式变成圆形。效果图如下： ![09a8e28f276a625f

淩亂°似流年/ 2022年10月06日 05:58/ 0 赞/ 304 阅读

相关纯CSS实现图像鼠标悬停效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家今天来看一组纯CSS实现的鼠标悬停效果，在线研究代码点[效果一][Link 1]、[效果二][Link 2]、

分手后的思念是犯贱/ 2022年08月26日 11:19/ 0 赞/ 326 阅读

相关纯CSS实现图像3D悬停效果

今天来看一个纯CSS实现的图像3D效果，请大家先到我的codepen里看看[效果][Link 1]，效果如下图所示。 ![SouthEast][] 左边为起始状态，右

男娘i/ 2022年08月25日 02:17/ 0 赞/ 265 阅读

相关如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

![在这里插入图片描述][20181209120851225.gif] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接

悠悠/ 2022年04月06日 13:52/ 0 赞/ 209 阅读