Sign & Export Card

jitesh208
Jan 17, 2026 2
Live Preview

Live Editor

<div class="wrap">
  <div class="card">

    <div class="docs">
      <div class="doc back"></div>
      <div class="doc mid"></div>
      <div class="doc front">
        <div class="lines"></div>
        <div class="sign"></div>
      </div>

      <div class="download">
        ⬇
      </div>
    </div>

    <h3>Sign and Export documents</h3>
    <p>Easily sign any documents and export them to PDF</p>

  </div>
</div>
*{box-sizing:border-box}

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#f2f2f2;
  font-family:system-ui;
}

/* Wrapper */
.wrap{
  padding:40px;
}

/* Card */
.card{
  width:280px;
  padding:28px 24px 32px;
  background:#f7f7f7;
  border-radius:28px;
  text-align:center;
  box-shadow:
    0 30px 60px rgba(0,0,0,.15),
    inset 0 1px 0 #fff;
  transition:.5s ease;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 40px 80px rgba(0,0,0,.2),
    inset 0 1px 0 #fff;
}

/* Document stack */
.docs{
  position:relative;
  height:170px;
  margin-bottom:20px;
}

/* Docs */
.doc{
  position:absolute;
  width:120px;
  height:150px;
  background:#fff;
  border-radius:14px;
  left:50%;
  transform:translateX(-50%);
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.back{
  transform:translateX(-50%) translate(-18px,12px);
  opacity:.6;
}
.mid{
  transform:translateX(-50%) translate(18px,8px);
  opacity:.8;
}
.front{
  z-index:2;
  animation:float 4s ease-in-out infinite;
}

/* Doc details */
.lines{
  width:60%;
  height:6px;
  background:#ddd;
  border-radius:6px;
  margin:24px auto 10px;
}
.lines::after{
  content:"";
  display:block;
  width:80%;
  height:6px;
  background:#ddd;
  border-radius:6px;
  margin:10px auto;
}

.sign{
  width:40px;
  height:20px;
  border-bottom:3px solid #bbb;
  border-radius:50%;
  margin:30px auto;
}

/* Download button */
.download{
  position:absolute;
  bottom:-14px;
  left:50%;
  transform:translateX(-50%);
  width:56px;
  height:56px;
  background:linear-gradient(135deg,#5b6cff,#6f7cff);
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:22px;
  box-shadow:
    0 14px 30px rgba(90,100,255,.5);
  animation:pulse 2.5s ease-in-out infinite;
}

/* Text */
h3{
  font-size:18px;
  margin:18px 0 6px;
}
p{
  font-size:14px;
  color:#777;
  margin:0;
}

/* Animations */
@keyframes float{
  50%{transform:translateX(-50%) translateY(-6px)}
}

@keyframes pulse{
  50%{box-shadow:0 20px 40px rgba(90,100,255,.7)}
}
Categories

Sign & Export Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
