2021/9/23 按钮美化-动画

最新推荐文章于 2023-09-07 16:59:22 发布

Zhang_aichi

最新推荐文章于 2023-09-07 16:59:22 发布

阅读量191

点赞数

文章标签：动画 css html

本文链接：https://blog.csdn.net/Zhang_aichi/article/details/120428886

版权

统一按钮样式

/* 统一按钮样式 */

.small {
    width: 80px;
}

.normal {
    width: 120px;
}

.big {
    width: 160px;
}

.allbtn {
    position: relative;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    transition: all .3s ease;
    outline: none;
}

.allbtn+.allbtn {
    margin-left: 10px;
}

普通按钮样式

/* 普通按钮 */

.info {
    background-image: linear-gradient( 315deg, #f5f5f5 0, #c7c1c1 74%);
    border: none;
    /* color: #000; */
    z-index: 1;
}

.info:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    background-image: linear-gradient(315deg, #c7c1c1 0, #f5f5f5 74%);
    transition: all .3s ease;
}

.info:hover:after {
    height: 100%;
    top: 0;
}

成功按钮样式

/* 成功按钮 */

.success {
    background-image: linear-gradient( 315deg, #89d8d3 0, #03c8a8 74%);
    border: 0;
    z-index: 1;
}

.success:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    background-image: linear-gradient(315deg, #4dccc6 0, #96e4df 74%);
    transition: all .3s ease;
}

.success:hover:after {
    height: 100%;
    top: 0;
}

警告按钮样式

/* 警告按钮 -驳回 */

.danger {
    background: linear-gradient( 0deg, rgba(255, 151, 0, 0.5) 0, rgba(251, 75, 2, 1) 74%);
    border: 0;
    z-index: 1;
}

.danger:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    background-image: linear-gradient(315deg, rgba(250, 100, 35, 0.61) 0, rgba(255, 153, 0, 0.925) 74%);
    transition: all .3s ease;
}

.danger:hover:after {
    height: 100%;
    top: 0;
}

功能按钮样式

/* 功能按钮 -导出 */

.primary {
    background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 74%);
    border: 0;
    z-index: 1;
}

.primary:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    background-image: linear-gradient(315deg, rgba(2, 126, 251, 1) 0, rgb(58, 188, 240) 74%);
    transition: all .3s ease;
}

.primary:hover:after {
    height: 100%;
    top: 0;
}