Buttons Page 2 - WebDevTales

81 Buttons

Modern, responsive CSS Buttons for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <a href="#" class="button"><i class="fas fa-star"></i> Favourites</a>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e0e0e0;
  overflow:hidden;
  font-family: Arial, sans-serif;
}
.button {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 60px;
  background: linear-gradient(45deg, #a64bf4, #d64bf4);
}
.button i {
  position: absolute;
  left: -30px;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: #e0e0e0;
  color: #a64bf4;
  border-radius: 50%;
  font-size: 34px;
  box-shadow: 
      inset 4px 4px 6px rgba(0, 0, 0, 0.2), 
      inset -4px -4px 6px rgba(255, 255, 255, 0.7), 
      4px 4px 10px rgba(0, 0, 0, 0.15), 
      -4px -4px 10px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}
.button i:hover {
  box-shadow: 
      inset 6px 6px 8px rgba(0, 0, 0, 0.25), 
      inset -6px -6px 8px rgba(255, 255, 255, 0.8), 
      6px 6px 12px rgba(0, 0, 0, 0.2), 
      -6px -6px 12px rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
  color: #d64bf4;
}
.button:hover {
  transform: translateY(-5px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="progress-button" onclick="startProgress()">
    <span>Click</span>
</div>
<div class="notification" id="notification">Action Completed!</div>

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #121212;
  overflow: hidden;
  color: white;
  font-family: Arial, sans-serif;
}
.progress-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(#4caf50 0deg, #444 0deg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s;
}
.progress-button:hover {
  transform: scale(1.1);
}
.progress-button::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: #222;
  border-radius: 50%;
}
.progress-button span {
  position: relative;
  z-index: 1;
}
.notification {
  margin-top: 20px;
  padding: 10px;
  background: #4caf50;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

let progress = 0;
function startProgress() {
    let btn = document.querySelector('.progress-button');
    let notification = document.getElementById('notification');
    progress = 0;
    let interval = setInterval(() => {
        progress += 5;
        btn.style.background = `conic-gradient(#4caf50 ${progress}deg, #444 ${progress}deg)`;
        if (progress >= 360) {
            clearInterval(interval);
            progress = 0;
            showNotification();
        }
    }, 100);
}

function showNotification() {
    let notification = document.getElementById('notification');
    notification.style.opacity = 1;
    setTimeout(() => {
        notification.style.opacity = 0;
    }, 2000);
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <div class="swipe-container">
    <div class="swipe-button" id="swipeBtn">
        <i class="fas fa-arrow-right"></i>
    </div>
    <div class="swipe-text" id="swipeText">Swipe to Confirm</div>
  </div>
<div class="notification" id="notification">✅ Action Completed!</div>

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow:hidden;
  height: 100vh;
  background: #121212;
  font-family: Arial, sans-serif;
  color: white;
}
.swipe-container {
  width: 220px;
  height: 50px;
  background: #444;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 5px;
}
.swipe-button {
  width: 45px;
  height: 45px;
  background: #f43676;
  border-radius: 50%;
  position: absolute;
  left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  cursor: grab;
  user-select: none;
  transition: background 0.3s ease;
}
.swipe-button i {
  transition: transform 0.3s ease;
}
.swipe-text {
  flex-grow: 1;
  text-align: center;
  pointer-events: none;
  font-size: 14px;
  transition: color 0.3s ease;
}
.notification {
  margin-top: 20px;
  padding: 10px;
  border-left: 5px solid #4caf50;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

let swipeBtn = document.getElementById("swipeBtn");
let swipeText = document.getElementById("swipeText");
let container = document.querySelector(".swipe-container");
let notification = document.getElementById("notification");

let isDragging = false;
let startX, offsetX;

swipeBtn.addEventListener("mousedown", (e) => {
    isDragging = true;
    startX = e.clientX;
    offsetX = swipeBtn.offsetLeft;
});

document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;
    let newX = offsetX + (e.clientX - startX);
    newX = Math.max(5, Math.min(newX, container.offsetWidth - swipeBtn.offsetWidth - 5));
    swipeBtn.style.left = newX + "px";

    // Change color and icon dynamically
    let progress = (newX / (container.offsetWidth - swipeBtn.offsetWidth - 5)) * 100;
    if (progress > 50) {
        swipeBtn.style.background = "#4caf50";
        swipeText.style.color = "#4caf50";
        swipeBtn.querySelector("i").className = "fas fa-check";
    } else {
        swipeBtn.style.background = "#f43676";
        swipeText.style.color = "white";
        swipeBtn.querySelector("i").className = "fas fa-arrow-right";
    }

    if (newX >= container.offsetWidth - swipeBtn.offsetWidth - 5) {
        completeAction();
    }
});

document.addEventListener("mouseup", () => {
    if (!isDragging) return;
    isDragging = false;
    swipeBtn.style.left = "5px";
    swipeBtn.style.background = "#f43676";
    swipeText.style.color = "white";
    swipeBtn.querySelector("i").className = "fas fa-arrow-right";
});

function completeAction() {
    isDragging = false;
    swipeBtn.style.left = container.offsetWidth - swipeBtn.offsetWidth - 5 + "px";
    showNotification();
    setTimeout(() => {
        swipeBtn.style.left = "5px";
        swipeBtn.style.background = "#f43676";
        swipeText.style.color = "white";
        swipeBtn.querySelector("i").className = "fas fa-arrow-right";
    }, 2000);
}

function showNotification() {
    notification.style.opacity = 1;
    setTimeout(() => {
        notification.style.opacity = 0;
    }, 2000);
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="hold-button" id="holdBtn">
    <span id="btnText">Hold to Confirm</span>
    <div class="progress-ring" id="progressRing"></div>
  </div>
  <div class="notification" id="notification">✅ Order Done!</div>

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #121212;
  overflow:hidden;
  font-family: Arial, sans-serif;
  color: white;
}
.hold-button {
  width: 120px;
  height: 120px;
  background: #444;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background 0.3s ease;
}
.hold-button i {
  font-size: 24px;
  transition: transform 0.3s ease;
}
.progress-ring {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 8px solid transparent;
  border-top: 8px solid #ff5722;
  clip-path: circle();
  transform: rotate(-90deg);
  transition: transform 2s linear;
}
.notification {
  margin-top: 20px;
  padding: 10px;
  background: #4caf50;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

let holdBtn = document.getElementById("holdBtn");
let progressRing = document.getElementById("progressRing");
let notification = document.getElementById("notification");
let btnText = document.getElementById("btnText");

let holdTime = 2000; // Hold duration in ms
let timer;
let colors = ["#ff5722", "#ff9800", "#8bc34a", "#00bcd4", "#673ab7"]; // Random colors

holdBtn.addEventListener("mousedown", () => {
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    holdBtn.style.background = randomColor;
    progressRing.style.borderTopColor = randomColor;
    progressRing.style.transform = "rotate(270deg)"; // Full circle rotation
    btnText.innerText = "Processing...";

    timer = setTimeout(() => {
        completeAction();
    }, holdTime);
});

document.addEventListener("mouseup", () => {
    clearTimeout(timer);
    resetButton();
});

function completeAction() {
    showNotification();
    btnText.innerText = "✅ Order Done!";
    holdBtn.style.background = "#4caf50";
}

function resetButton() {
    progressRing.style.transform = "rotate(-90deg)";
    holdBtn.style.background = "#444";
    btnText.innerText = "Hold to Confirm";
}

function showNotification() {
    notification.style.opacity = 1;
    setTimeout(() => {
        notification.style.opacity = 0;
    }, 2000);
}

81 Buttons

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code