day - 00 month - 0000
Blogul lui Petre Vitan

Butoane css

Exemple butoane css




    <h1>Exemple butoane css</h1>
   

    <div class="container">
        <div class="btn-container">
            <button class="btn-neon">1. NEON GLOW</button>
        </div>
        <div class="btn-container">
            <button class="btn-explosion">2. EXPLOSIVE</button>
        </div>
        <div class="btn-container">
            <button class="btn-liquid">3. LIQUID MORPH</button>
        </div>
        <div class="btn-container">
            <button class="btn-split">4. SPLIT EFFECT</button>
        </div>
        <div class="btn-container">
            <button class="btn-outline">5. FILL REVEAL</button>
        </div>
        <div class="btn-container">
            <button class="btn-shake">6. SHAKE IT</button>
        </div>
        <div class="btn-container">
            <button class="btn-lightning">7. LIGHTNING</button>
        </div>
        <div class="btn-container">
            <button class="btn-3d-flip">
                <span class="front">8. 3D FLIP</span>
                <span class="back">FLIPPED!</span>
            </button>
        </div>
        <div class="btn-container">
            <button class="btn-pulse">9. PULSE BEAT</button>
        </div>
        <div class="btn-container">
            <button class="btn-blur">10. ZOOM BLUR</button>
        </div>
        <div class="btn-container">
            <button class="btn-glitch">11. GLITCH</button>
        </div>
        <div class="btn-container">
            <button class="btn-morph">12. MORPH</button>
        </div>
    </div>
<style>
          body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #111;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            color: #fff;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            max-width: 1200px;
            width: 100%;
        }

        .btn-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            height: 100px;
        }

        button {
            position: relative;
            padding: 15px 30px;
            font-size: 16px;
            font-weight: 600;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            outline: none;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        h1 {
            color: #fff;
            margin-bottom: 10px;
            text-align: center;
            font-size: 2.5rem;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        
        .subtitle {
            color: #ccc;
            text-align: center;
            margin-bottom: 40px;
            font-size: 1.2rem;
            letter-spacing: 1px;
        }

        .btn-neon {
            background-color: transparent;
            color: #0ff;
            border: 2px solid #0ff;
            box-shadow: 0 0 5px #0ff;
            transition: all 0.3s;
        }

        .btn-neon:hover {
            color: #111;
            background-color: #0ff;
            box-shadow: 0 0 20px #0ff, 0 0 40px #0ff, 0 0 60px #0ff;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            letter-spacing: 3px;
        }

        .btn-explosion {
            background-color: #ff3366;
            color: white;
        }

        .btn-explosion:hover {
            animation: explode 0.5s forwards;
            box-shadow: 0 0 30px #ff3366;
        }

        @keyframes explode {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            60% { transform: scale(0.9); }
            100% { transform: scale(1.1); }
        }

        .btn-liquid {
            background-color: #4a00e0;
            color: white;
            border-radius: 30px;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .btn-liquid:hover {
            border-radius: 5px;
            background-color: #8e2de2;
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 15px 25px rgba(142, 45, 226, 0.4);
        }

        .btn-split {
            background-color: #fd1d1d;
            color: white;
            z-index: 1;
        }

        .btn-split::before,
        .btn-split::after {
            content: '';
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background-color: #fd1d1d;
            transition: all 0.3s ease;
            z-index: -1;
        }

        .btn-split::before {
            left: 0;
        }

        .btn-split::after {
            right: 0;
        }

        .btn-split:hover::before {
            transform: translateX(-20%);
            background-color: #333;
        }

        .btn-split:hover::after {
            transform: translateX(20%);
            background-color: #333;
        }

        .btn-outline {
            background-color: transparent;
            color: #3ae374;
            border: 2px solid #3ae374;
            transition: all 0.5s;
            z-index: 1;
        }

        .btn-outline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background-color: #3ae374;
            transition: all 0.5s;
            z-index: -1;
        }

        .btn-outline:hover {
            color: #000;
        }

        .btn-outline:hover::before {
            width: 100%;
        }

        .btn-shake {
            background-color: #ffb142;
            color: white;
        }

        .btn-shake:hover {
            animation: shake 0.5s infinite;
            background-color: #ff5252;
        }

        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-5px) rotate(-5deg); }
            50% { transform: translateX(5px) rotate(5deg); }
            75% { transform: translateX(-5px) rotate(-5deg); }
            100% { transform: translateX(0); }
        }

        .btn-lightning {
            background-color: #222;
            color: #f1c40f;
            border: 2px solid #f1c40f;
        }

        .btn-lightning:hover {
            animation: lightning 1.5s infinite;
            box-shadow: 0 0 20px #f1c40f;
        }

        @keyframes lightning {
            0% { box-shadow: 0 0 5px #f1c40f; }
            25% { box-shadow: 0 0 15px #f1c40f, 0 0 25px #f1c40f; }
            50% { box-shadow: 0 0 5px #f1c40f; }
            75% { box-shadow: 0 0 15px #f1c40f, 0 0 25px #f1c40f, 0 0 50px #f1c40f; }
            100% { box-shadow: 0 0 5px #f1c40f; }
        }

        .btn-3d-flip {
            background-color: #3498db;
            color: white;
            transform-style: preserve-3d;
            perspective: 800px;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            padding: 25px 45px;
            min-width: 180px;
        }

        .btn-3d-flip:hover {
            transform: rotateY(180deg);
            background-color: #2980b9;
        }

        .btn-3d-flip .front,
        .btn-3d-flip .back {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            backface-visibility: hidden;
        }

        .btn-3d-flip .back {
            transform: rotateY(180deg);
        }

        .btn-pulse {
            background-color: #9b59b6;
            color: white;
        }

        .btn-pulse:hover {
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.7); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(155, 89, 182, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 89, 182, 0); }
        }

        .btn-blur {
            background-color: #27ae60;
            color: white;
        }

        .btn-blur:hover {
            animation: blur 0.5s forwards;
            letter-spacing: 3px;
        }

        @keyframes blur {
            0% { filter: blur(0px); transform: scale(1); }
            50% { filter: blur(3px); transform: scale(1.1); }
            100% { filter: blur(0px); transform: scale(1.05); background-color: #2ecc71; }
        }

        .btn-glitch {
            background-color: #e84393;
            color: white;
            position: relative;
            padding: 20px 40px;
        }

        .btn-glitch:hover {
            animation: glitch 0.5s infinite;
        }

        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-5px, 5px); }
            40% { transform: translate(-5px, -5px); }
            60% { transform: translate(5px, 5px); }
            80% { transform: translate(5px, -5px); }
            100% { transform: translate(0); }
        }

        .btn-glitch::before,
        .btn-glitch::after {
            content: 'GLITCH';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s;
        }

        .btn-glitch::before {
            color: #ff00ff;
            z-index: -1;
        }

        .btn-glitch::after {
            color: #00ffff;
            z-index: -2;
        }

        .btn-glitch:hover::before {
            opacity: 0.8;
            transform: translate(-5px, -5px);
        }

        .btn-glitch:hover::after {
            opacity: 0.8;
            transform: translate(5px, 5px);
        }

        .btn-morph {
            background-color: #1abc9c;
            color: white;
            border-radius: 8px;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .btn-morph:hover {
            border-radius: 50px;
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(360deg);
        }
</style>
<script>
          const buttons = document.querySelectorAll('button');
        
        buttons.forEach(button => {
            if (button.classList.contains('btn-glitch')) {
                button.addEventListener('mouseenter', () => {
                    button.textContent = '';
                });
                
                button.addEventListener('mouseleave', () => {
                    button.textContent = '11. GLITCH';
                });
            }
            
            if (button.classList.contains('btn-morph')) {
                button.addEventListener('mouseenter', () => {
                    setTimeout(() => {
                        button.textContent = 'WOW!';
                    }, 250);
                });
                
                button.addEventListener('mouseleave', () => {
                    setTimeout(() => {
                        button.textContent = '12. MORPH';
                    }, 250);
                });
            }
        });
</script>

Niciun comentariu:

Trimiteți un comentariu

Lasa un comentariu

Teste

Iti promit ca intr- zi cand o sa fim batrani, o sa te tin de mana si apoi uitandu-ma in ochii tai am sa-ti spun: "Ai vazut ca am avut dreptate? Am imbatranit alaturi de tine! Te iubesc!"
Bine ai venit!

Articole aleatorii

Formular de contact

Nume

E-mail *

Mesaj *

Arhivă blog

Bine de stiut

Cand iti este dor de cineva sa nu inchizii ochii. Are sa-ti fie si mai dor!
Iti promit ca intr- zi cand o sa fim batrani, o sa te tin de mana si apoi uitandu-ma in ochii tai am sa-ti spun: "Ai vazut ca am avut dreptate? Am imbatranit alaturi de tine! Te iubesc!"

Comentarii recente

Social

facebook
youtube

De unde avem vizite?

Flag Counter

Radio online

Intr-un ochi de apa patru ochi luceste
Ce sa fie oare? Este doua peste!
(fara poezie viata e pustiu)


💖 Copyright © 2018 - ☀ Blogul lui Petre Vitan ☀
💖 Powered by Blogger ⋆⭒˚｡⋆ Design by Petre Vitan ⋆⭒˚｡⋆