Learn with us how to create an awesome checkout button!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim ♬ Insane Yorker - Bruno Boe
Get your code ⬇️
1. HTML Code
<div class="center">
<h1>Daily UI 002: Credit Card Checkout</h1>
<div class="wrapper">
<button class="checkout">Checkout</button>
<div class="card-wrap">
<div class="card">
[[[https://codepen.io/alexzaworski/pen/b8db19494e266b36923ed9231645a6a5]]]
</div>
</div>
</div>
</div>
2. CSS Code
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, html {
height: 100%;
}
body {
display:flex;
background: #DAECF7;
flex-direction: column;
}
h1 {
font-size: 1em;
font-family: "Montserrat";
text-transform: uppercase;
margin-bottom: 20px;
text-align: center;
color: #b6d0e0;
position: relative;
margin-top: -15px;
line-height: 15px;
}
.center {
margin: auto;
}
.wrapper {
width: 700px;
flex-shrink: 0;
background: white;
overflow:hidden;
height: 364px;
border-radius: 8px;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.card-wrap {
width: 260px;
float:right;
background: #665aa7;
padding: 50px;
transform:
scale(1.5)
rotate(20deg);
}
.card {
transform:
scale(.75)
rotate(-20deg);
}
svg {
&:not(:root) {
overflow:visible;
}
width: 150%;
position: relative;
right: 130px;
top: 10px;
overflow:visible;
}
#sunglasses {
transition: transform .15s;
.checkout:hover ~ .card-wrap & {
transform: translateY(-40px);
}
}
#right_eye {
&_wink {
display:none;
}
.checkout:active ~ .card-wrap & {
display:none;
&_wink {
display:block;
}
}
}
#mouth {
transition: transform .15s;
.checkout:hover ~ .card-wrap & {
transform: translateY(-10px);
}
}
#front_hand, #back_hand {
transition: transform .03s;
.checkout:active ~ .card-wrap & {
transform: translateX(10px);
}
}
.checkout {
outline: none;
background: #665aa7;
border: 0;
color: white;
position: relative;
top: 50%;
left: 15%;
transform: translateY(-50%);
padding: 12px 16px;
font-family: "Montserrat";
text-transform: uppercase;
font-size: 1.1em;
letter-spacing: .1em;
border-radius: 4px;
transition: all .1s ease-out;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
&:hover:not(:active) {
background: lighten(#665aa7, 10%);
}
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
