【五分钟CSS】背景渐变按钮效果

BGM:Campfire – Music By Aden

第一期试水哦~
这次给大家带来的是CSS的效果展示,代码来源于网络
欢迎课代表上传Github分享成品
以后可能会看见一些好看的效果就制作一个写的过程哦~

本期代码

<!--
    代码来源于网络 Code from the Internet
    复古派科技:https://fgpai.com
    灵工艺软件工作室:https://nullcraft.org
    项目文件开源地址:https://github.com/FastChen/FiveMinutesCSSEffect
    
    渐变色:
    to right,#f6d365 0%,#fda085 51% ,#f6d365 100%
    to right,#fbc2eb 0%,#a6c1ee 51% ,#fbc2eb 100%
    to right,#84fab0 0%,#8fd3f4 51% ,#84fab0 100%
    to right,#a1c4fd 0%,#c2e9fb 51% ,#a1c4fd 100%
    to right,#ffecd2 0%,#fcb69f 51% ,#ffecd2 100%
-->
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>五分钟玩转CSS - 渐变按钮</title>
</head>
<style>
body{
    margin: 0;
    background-color: #212121;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 80vw;
    margin: 0 auto;
    min-height: 100vh;
}
.btn{
    flex:1 1 auto;
    margin: 10px;
    padding: 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff;
    border-radius: 10px;
}
.btn:hover{
    background-position: right center;
}
.btn-1{
    background-image: linear-gradient(to right,#f6d365 0%,#fda085 51% ,#f6d365 100%);
}
.btn-2{
    background-image: linear-gradient(to right,#fbc2eb 0%,#a6c1ee 51% ,#fbc2eb 100%);
}
.btn-3{
    background-image: linear-gradient(to right,#84fab0 0%,#8fd3f4 51% ,#84fab0 100%);
}
.btn-4{
    background-image: linear-gradient(to right,#a1c4fd 0%,#c2e9fb 51% ,#a1c4fd 100%);
}
.btn-5{
    background-image: linear-gradient(to right,#ffecd2 0%,#fcb69f 51% ,#ffecd2 100%);
}
</style>
<body>
    <div class="container">
        <a class="btn btn-1">鼠标放进来~</a>
        <a class="btn btn-2">鼠标放进来~</a>
        <a class="btn btn-3">鼠标放进来~</a>
        <a class="btn btn-4">鼠标放进来~</a>
        <a class="btn btn-5">鼠标放进来~</a>
    </div>
</body>
</html>

本视频由 复古派科技 官方制作 你可以前往 官方B站 获取更多教程

发表评论

登录后才能评论