Icon on Hover

admin1234

Jan 31, 2026 6

Live Preview

Live Editor

<button class="icon-btn">
  Continue
  <svg viewBox="0 0 24 24">
    <path d="M5 12h14M13 5l7 7-7 7"/>
  </svg>
</button>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#020617;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* button */
.icon-btn{
  position:relative;
  padding:16px 44px 16px 24px;
  border-radius:14px;
  background:#6366f1;
  color:#fff;
  font-size:16px;
  font-weight:600;
  border:none;
  cursor:pointer;
  overflow:hidden;
  box-shadow:
    0 12px 0 #4338ca,
    0 24px 50px rgba(0,0,0,.6);
  transition:.25s;
}

/* icon */
.icon-btn svg{
  position:absolute;
  right:18px;
  top:50%;
  width:18px;
  height:18px;
  fill:none;
  stroke:#fff;
  stroke-width:2;
  transform:translateY(-50%) translateX(-8px);
  opacity:0;
  transition:.25s;
}

/* hover */
.icon-btn:hover{
  transform:translateY(-4px);
}
.icon-btn:hover svg{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* press */
.icon-btn:active{
  transform:translateY(6px);
  box-shadow:
    0 4px 0 #4338ca,
    0 10px 20px rgba(0,0,0,.6);
}

Categories

Icon on Hover

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet