简单的单按钮引导卡片 - wordpress 区块

1
<div id="cao_widget_ads-2" class="widget widget-adss">
2
    <div class="adsbg">
3
        <!--背景颜色-->
4
            <h4>Npcink</h4>
5
            <h5>精选实用、好用的wordpress主题为你而建</h5>
6
            <span class="btn btn-outline">查看</span>
7

8
    </div>
9
</div>
10
<style type="text/css">
11
    .widget-area .widget.widget-adss {
12
    overflow: hidden;
13
    padding: 0;
14
    border-radius: 0;
15
}
16
.widget-area .widget {
17
    position: relative;
18
    background-color: #fff;
19
    padding: 20px;
20
    border-radius: 4px;
21
    clear: both;
22
    overflow: hidden;
23
}
24
.widget-adss .asr {
25
    display: block;
26
    padding: 30px 15px;
27
    text-align: center;
28
    color: #fff !important;
29
    background: #64ddbb;
30
    text-decoration: none;
31
    border-radius: 10px;
32
}
33
.widget-adss .asr h4 {
34
    margin: 0;
35
    font-size: 18px;
36
    font-weight: bold;
37
    color: #fff;
38
}
39
.widget-adss .asr h5 {
40
    margin: 15px 0 0;
41
    font-weight: normal;
42
    color: #fff;
43
}
44
.widget-adss .asr .btn {
45
    margin-top: 20px;
46
    font-weight: normal;
47
    border-radius: 100px;
48
    text-align: center;
49
    vertical-align: top;
50
    user-select: none;
51
    -webkit-transition: all .3s ease-in-out;
52
    -moz-transition: all .3s ease-in-out;
53
    transition: all .3s ease-in-out;
54
    padding: 4px 30px;
55
    line-height: inherit;
56
}
57
.btn {
58
    display: inline-block;
59
    padding: .35rem 1.5rem;
60
    border: 1px solid transparent;
61
    border-radius: .1rem;
62
    border-radius: 2px;
63
    border-radius: 4px;
64
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
65
    box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
66
    vertical-align: middle;
67
    text-align: center;
68
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
69
    white-space: nowrap;
70
    font-weight: 400;
71
    font-size: .875rem;
72
    line-height: 1.5;
73
    cursor: pointer;
74
    -webkit-transition: all .2s ease-in-out;
75
    transition: all .2s ease-in-out;
76
    user-select: none;
77
}
78
.btn-outline {
79
    /* color: #fff; */
80
    background-color: transparent;
81
    border: 1px solid #fff;
82
}
83
.btn-outline:hover, .btn-outline:focus, .btn-outline.focus {
84
    color: #555;
85
    background-color: #fff;
86
}
87
.btn:hover {
88
    opacity: 0.8;
89
    -webkit-transition: all .3s ease-in-out;
90
    -moz-transition: all .3s ease-in-out;
91
    transition: all .3s ease-in-out;
92
}
93
</style>