css实现红色带阴影导航分页按钮效果代码-html代码-BFW代码库

css实现红色带阴影导航分页按钮效果代码

代码语言：html

代码描述：css实现红色带阴影导航分页按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <style>
    body{
        padding:30px;
    }
        .mb-4, .my-4 {
        margin-bottom: 1.5rem!important;
    }
    .btn:not(:disabled):not(.disabled) {
        cursor: pointer;
    }
    .btn:not(.go-up) {
        border-radius: 3px;
        white-space: normal;
        font-size: .875rem;
    }
    .btn-search {
        position: relative;
        background-color: rgba(150,150,150,.16);
        transition: .2s ease-out;
    }
    .text-gray {
        color: #555;
    }
    .mr-2, .mx-2 {
        margin-right: 0.5rem!important;
    }
    .btn {
        display: inline-block;
        font-weight: 400;
        color: #212529;
        text-align: center;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.25rem;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    a {
        color: #282a2d;
        outline: 0!important;
        text-decoration: none;
    }
    .btn-search:hover, .btn-search.current {
        color: #fff!important;
        background-color: #f1404b;
        box-shadow: 0 5px 20px -3px rgb(249 100 90 /.........完整代码请登录后点击上方下载按钮下载查看