秒杀按钮的制作

最新推荐文章于 2024-08-17 09:31:45 发布

翻译最新推荐文章于 2024-08-17 09:31:45 发布 · 505 阅读

css 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种秒杀按钮的设计方案，包括按钮的布局、样式和交互效果等。通过使用HTML和CSS，实现了按钮的美观展示及hover状态下的下划线效果。

秒杀按钮的制作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <style>
        /*外部容器*/
        .contant{
            background:url("public/img/底纹.png");
            width: 362px;
            height: 489px;
            position: relative;
        }

        /*内部容器*/
        .d{
            width: 180px;
            height: 180px;
            font-size:90px;
            color: #fff;
            position: absolute;
            margin:50%;
            left:-90px;
            top:-90px;
        }
        /*a标签*/
        a{
            text-decoration:none;
            color: #fff;
        }
        /*a标签hover后*/
        a:hover{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="contant">
    <div class="d"><a href="">秒杀</a><a href="">包邮</a></div>
</div>
</body>
</html>