web 前端作业

不是这还拿不下你

已于 2022-11-12 21:18:29 修改

阅读量158

点赞数

文章标签：前端 css html

于 2022-11-12 21:17:41 首次发布

本文链接：https://blog.csdn.net/xiaobaijiaowo/article/details/127825613

版权

炫酷按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>炫酷按钮</title>
</head>
<style>
    div{
        text-align: center;
    }
    .button{

        height: 80px;
        width: 80px;
        background-color: rebeccapurple;
        color: white;
        position: relative;
        background: #ff4500;
        border: none;
        color: white;
        padding: 15px 24px;
        font-size: 1.4rem;
        outline: none;
        box-shadow: -6px 6px 0 hsl(16, 100%, 30%);

    }
    .button:hover {
        background-color: bisque;
        color: white;
        width: 100px;
        height: 100px;
        box-shadow: 2px 2px 60px bisque,
        -2px 2px 50px rgb(123, 145, 43),
        2px 2px 40px rgb(201, 95, 8),
        -2px 2px 60px blue;
    }
</style>
<body>
<div>
    <button class="button">按钮</button>
</div>
</body>
</html>

使用button标签创建按钮

效果如图：