Button Generator with Icon – Make Modern Responsive Buttons in Seconds

Button Text

Button URL (Optional)

Select Icon DownloadPlayHeartStarShareTelegramWhatsappLinkEyeLockHomeMenuUserBellSearchCartCameraMicGiftTrophyFireRocketZapSunMoonCloudWifiBluetoothBatteryShieldKeyGlobeMapClockCalendarMailPhoneVideoMusicImageFileFolderTrashEditCheckCrossPlusMinusRefreshSettings

Background Color

Text & Icon Color

Hover Background

Border Radius (px) 12px

Padding (px) 16px

Font Size (px) 18px

Live Preview

Generated Code

<button class="desi-btn">
  <svg width="23.4px" height="23.4px" fill="currentColor" viewBox="0 0 24 24"><path d="M12 16l-5-5h3V3h4v8h3l-5 5zM19 18H5v2h14v-2z"/></svg>
  Download Now
</button>\n\n<style>
.desi-btn {
  background: #4a00e0; color: #ffffff; border: none; border-radius: 12px;
  padding: 12.8px 16px; font-size: 18px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.desi-btn:hover { background: #3a00b0; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.desi-btn svg { fill: currentColor; }
</style>

0.0/5

0 İnceleme

Yorumunuz:

Yorumunuz için teşekkürler!