HTML&CSS：卡片式提交框

这个页面实现了一个简单的订阅表单，包含一个输入框和一个提交按钮。页面使用了Flexbox布局和绝对定位来实现居中显示和装饰效果。输入框和按钮具有良好的视觉效果和交互体验，包括焦点状态和悬停效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #212121;
        }

        .subscribe {
            position: relative;
            height: 140px;
            width: 240px;
            padding: 20px;
            background-color: #FFF;
            border-radius: 4px;
            color: #333;
            box-shadow: 0px 0px 60px 5px rgba(0, 0, 0, 0.4);
        }

        .subscribe:after {
            position: absolute;
            content: "";
            right: -10px;
            bottom: 18px;
            width: 0;
            height: 0;
            border-left: 0px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #1a044e;
        }

        .subscribe p {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 4px;
            line-height: 28px;
        }

        .subscribe input {
            position: absolute;
            bottom: 30px;
            border: none;
            border-bottom: 1px solid #d4d4d4;
            padding: 10px;
            width: 82%;
            background: transparent;
            transition: all .25s ease;
        }

        .subscribe input:focus {
            outline: none;
            border-bottom: 1px solid #0d095e;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', 'sans-serif';
        }

        .subscribe .submit-btn {
            position: absolute;
            border-radius: 30px;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            background-color: #0f0092;
            color: #FFF;
            padding: 12px 25px;
            display: inline-block;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 5px;
            right: -10px;
            bottom: -20px;
            cursor: pointer;
            transition: all .25s ease;
            box-shadow: -5px 6px 20px 0px rgba(26, 26, 26, 0.4);
        }

        .subscribe .submit-btn:hover {
            background-color: #07013d;
            box-shadow: -5px 6px 20px 0px rgba(88, 88, 88, 0.569);
        }
    </style>
</head>

<body>
    <div class="subscribe">
        <p>SUBSCRIBE</p>
        <input placeholder="Your e-mail" class="subscribe-input" name="email" type="email">
        <br>
        <div class="submit-btn">SUBMIT</div>
    </div>
</body>

</html>

HTML 结构

subscribe：定义了一个订阅表单的容器。
p：显示"SUBSCRIBE"文本。
input：定义了一个输入框，用于输入电子邮件地址。
submit-btn：定义了一个提交按钮。

CSS 样式

.subscribe：设置为相对定位。定义了高度、宽度、内边距、背景颜色、圆角、颜色和阴影。
.subscribe:after：定义了一个伪元素，用于创建一个三角形的装饰效果。设置为绝对定位，位于容器的右下角。
.subscribe p：设置文本居中对齐，字体大小、加粗、字母间距和行高。
.subscribe input：设置为绝对定位，位于容器的底部。定义了边框、内边距、宽度、背景颜色和过渡效果。
.subscribe input:focus：定义了输入框聚焦时的样式，包括边框颜色和字体样式。
.subscribe .submit-btn：设置为绝对定位，位于容器的右下角。定义了圆角、背景颜色、颜色、内边距、字体大小、加粗、字母间距、右下角和底部位置、光标样式、过渡效果和阴影。
.subscribe .submit-btn:hover：定义了按钮悬停时的样式，包括背景颜色和阴影效果。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！