HTML
<button>Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; }
HTML
<button class="button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .button { display: inline-block; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .button:hover { background-color: #2980b9; }
HTML
<button class="gradient-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .gradient-button{ background-color: linear-gradient(to right, #FF6B6B, #556270); color: white; border: none; border-radius: 30px; cursor: pointer; transition: filter 0.3s ease; } .gradient-button:hover { filter: grayscale(80%); }
HTML
<button class="outline-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .outline-button { background-color: transparent; color: #3498db; border: 2px solid #3498db; border-radius: 5px; cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease; } .outline-button:hover { color: white; background-color: #3498db; }
HTML
<button class="gradient-border-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .gradient-border-button { background-color: transparent; color: #fff; border: none; border-radius: 5px; cursor: pointer; background-image: linear-gradient(to right, #3498db, #f39c12); background-clip: text; -webkit-background-clip: text; color: transparent; border: 2px solid transparent; transition: border-color 0.3s ease; } .gradient-border-button:hover { border-color: #3498db; }
HTML
<button class="raised-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .raised-button { background-color: #2ecc71; color: white; border: none; border-radius: 5px; cursor: pointer; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .raised-button:hover { transform: translateY(-2px); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); }
HTML
<button class="hover-effect-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .hover-effect-button { background-color: #f39c12; color: white; border: none; border-radius: 50px; cursor: pointer; overflow: hidden; transition: background-color 0.3s ease, transform 0.3s ease; } .hover-effect-button:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 100%; background-color: rgba(255, 255, 255, 0.1); transition: width 0.3s ease; z-index: -1; } .hover-effect-button:hover { background-color: #e67e22; transform: scale(1.1); } .hover-effect-button:hover:before { width: 120%; }
HTML
<button class="gradient-animation-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .gradient-animation-button { background: linear-gradient(to right, #3498db, #e74c3c); color: white; border: none; border-radius: 5px; cursor: pointer; background-size: 200% auto; transition: background-position 0.3s ease; } .gradient-animation-button:hover { background-position: right center; }
HTML
<button class="borderless-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .borderless-button { background-color: rgb(0,0,0,.1); border-radius:5px; color: #3498db; border: none; cursor: pointer; transition: color 0.3s ease,background-color 0.3s ease; } .borderless-button:hover { color: #f9f9f9; background-color: rgb(0,0,0,.3); }
HTML
<button class="opacity-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .opacity-button { background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; opacity: 0.8; transition: opacity 0.3s ease; } .opacity-button:hover { opacity: 1; }
HTML
<button class="outline-animation-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .outline-animation-button { background-color: transparent; color: #2ecc71; border: 2px solid #2ecc71; border-radius: 5px; cursor: pointer; overflow: hidden; position: relative; } .outline-animation-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: #2ecc71; transition: left 0.3s ease; } .outline-animation-button:hover::before { left: 0; }
HTML
<button class="ink-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .ink-button { background-color: transparent; color: #3498db; border: 2px solid #3498db; border-radius: 5px; cursor: pointer; overflow: hidden; position: relative; } .ink-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; background-color: rgba(52, 152, 219, 0.4); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; pointer-events: none; } .ink-button:hover::after { transform: translate(-50%, -50%) scale(1); opacity: 1; }
HTML
<button class="push-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .push-button { background-color: #e67e22; color: white; border: none; border-radius: 5px; cursor: pointer; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .push-button::before { content: ""; position: absolute; top: 2px; left: 2px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); border-radius: 5px; z-index: -1; } .push-button:active { transform: translateY(3px); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4); }
HTML
<button class="slide-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .slide-button { background-color: #9b59b6; color: white; border: none; border-radius: 5px; cursor: pointer; position: relative; overflow: hidden; transition: color 0.3s ease; } .slide-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.2); transform: skewX(-45deg); transition: left 0.3s ease; } .slide-button:hover::before { left: 100%; }
HTML
<button class="glow-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .glow-button { background-color: #34495e; color: white; border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(52, 73, 94, 0.8); transition: box-shadow 0.3s ease; } .glow-button:hover { box-shadow: 0 0 20px rgba(52, 73, 94, 1); }
HTML
<button class="border-fill-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .border-fill-button { background-color: transparent; color: #3498db; border: 2px solid transparent; border-radius: 5px; cursor: pointer; position: relative; overflow: hidden; transition: color 0.3s ease, border-color 0.3s ease; } .border-fill-button:before { content: ""; position: absolute; width: 0; height: 100%; background-color: #3498db; top: 0; left: 0; transition: width 0.3s ease; } .border-fill-button:hover:before { width: 100%; }
HTML
<button class="ripple-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .ripple-button { position: relative; overflow: hidden; background-color: #9b59b6; color: white; border: none; border-radius: 5px; cursor: pointer; } .ripple-button::before { content: ""; position: absolute; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transform: scale(0); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .ripple-button:hover::before { transform: scale(3); opacity: 1; }
HTML
<button class="stripe-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .stripe-button { background-color: #9b59b6; color: white; border: none; border-radius: 5px; cursor: pointer; position: relative; overflow: hidden; transition: color 0.3s ease; } .stripe-button::before { content: ""; position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 20px); top: 0; left: -100%; transition: left 0.3s ease; } .stripe-button:hover::before { left: 0; }
HTML
<button class="fade-in-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .fade-in-button { background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; opacity: .2; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-in-button:hover { opacity: 1; transform: translateY(0); }
HTML
<button class="cursor-follow-button""><span class="cursor-item"">Click Me</span"></button">
CSS
.cursor-follow-button { background-color: #9b59b6; color: white; border: none; border-radius: 5px; cursor: none; position: relative; overflow: hidden; } .cursor-item { display: inline-block; transition: transform 0.3s ease; } .cursor-follow-button:hover .cursor-item { transform: translateX(calc((100% + 30px) / 2)); }
HTML
<button class="flip-card-button"><div class="flip-card-front"><span>Hover Me</span></div><div class="flip-card-back"><span>Click Me</span></div></button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .flip-card-button { perspective: 1000px; border: none; background: none; cursor: pointer; } .flip-card-front, .flip-card-back { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 5px; position: absolute; top: 0; left: 0; backface-visibility: hidden; transition: transform 0.5s ease; } .flip-card-front { background-color: #3498db; color: white; } .flip-card-back { background-color: #e74c3c; color: white; transform: rotateY(180deg); } .flip-card-button:hover .flip-card-front { transform: rotateY(180deg); } .flip-card-button:hover .flip-card-back { transform: rotateY(0deg); }
HTML
<button class="neon-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .neon-button { padding: 15px 30px; background-color: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; box-shadow: 0 0 10px rgba(39, 174, 96, 0.7), 0 0 20px rgba(39, 174, 96, 0.5); animation: neon 1.5s infinite alternate; } @keyframes neon { 0% { box-shadow: 0 0 10px rgba(39, 174, 96, 0.7), 0 0 20px rgba(39, 174, 96, 0.5); } 100% { box-shadow: 0 0 20px rgba(39, 174, 96, 0.7), 0 0 30px rgba(39, 174, 96, 0.5); } }
HTML
<button class="ink-splash-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .ink-splash-button { padding: 15px 30px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; overflow: hidden; position: relative; } .ink-splash-button::before { content: ""; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, #55f 10%, transparent 50%); top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .ink-splash-button:hover::before { transform: translate(-50%, -50%) scale(3); opacity: 1; }
HTML
<button class="three-d-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .three-d-button { padding: 15px 30px; background-color: #3498db; color: white; border: none; border-radius: 10px; cursor: pointer; position: relative; transform-style: preserve-3d; transition: box-shadow 0.3s ease; } .three-d-button::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); top: 10px; left: 10px; border-radius: 10px; } .three-d-button:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } .glow-in-the-dark-button { padding: 15px 30px; background-color: #333; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; position: relative; overflow: hidden; }
HTML
<button class="glow-in-the-dark-button">Click me</button>
CSS
button{ margin: 30px; padding: 12px 24px; width: 150px; height: 50px; } .glow-in-the-dark-button { padding: 15px 30px; background-color: #333; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; position: relative; overflow: hidden; } .glow-in-the-dark-button::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: #fff; opacity: .5; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.3s ease; } .glow-in-the-dark-button:hover { background-color: #555; } .glow-in-the-dark-button:hover::before { transform: translate(-50%, -50%) scale(1.5); }