[Snippet] Bootstrap 4 card with animated button

[Snippet] Bootstrap 4 card with animated button

HTML Code

<div class="container d-flex justify-content-center mt-5">

    <div class="card bg-primary p-2 text-center">

        <div class="mt-5"> <img src="https://i.imgur.com/sVgvyrT.png" width="70" /> </div> <span class="total">Total</span>

        <h4 class="mt-4 text-white"> You have 8 vulnerable certificates </h4>

        <div class="text-center"> <button class="btn butn"> Fix it now</button> </div>

    </div>

</div>

CSS Code

body {
    background: #eee
}

.card {
    width: 350px
}

.total {
    color: #d0c9c9;
    font-size: 13px;
    margin-top: 6px
}

.butn {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 150px;
    background: #28a745;
    color: #fff;
    transition: all 0.5s
}

.butn:hover {
    background: #1e7e34;
    color: #fff;
    transform: scale(1.1)

}