Skip to main content
snippet de código
Origen Enlace
jachguate
  • 32.1k
  • 8
  • 41
  • 69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pregunta</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>
<body class="row align-items-center vh-100 text-center">

    <div class="container-fluid">
        
        <div class="pregunta">
            <!-- Aquí abajo puedes cambiar la pregunta -->
            <h1 class="fw-bold">Quieres ser mi novia?❤</h1>
        </div>

        <div class="foto">
            <!-- Aquí puedes cambiar la imagen -->
            <img src="img/imagen.jpg" class="rounded w-25 p-2" alt="Fotito">
        </div>
        
        <div class="respuestas">
            <!-- Aquí puedes cambiar las respuestas -->
           
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="negativo" href="#" role="button">No</a>
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="positivo" href="#" role="button">Si</a>
        </div>

        
    </div>    
    
    <script >
        let respuestaSi=document.getElementById('positivo')
        respuestaSi.addEventListener("click",function(e){
            alert("Sabía que dirías que si ❤");
        })
        let respuestaNo=document.getElementById('negativo')
        respuestaNo.addEventListener("mousemove",function(e){
            let x = Math.round(Math.random()*93);
            let y = Math.round(Math.random()*93);
            respuestaNo.style.left = x+"%";
            respuestaNo.style.top = y+"%";
})
    </script> 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pregunta</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>
<body class="row align-items-center vh-100 text-center">

    <div class="container-fluid">
        
        <div class="pregunta">
            <!-- Aquí abajo puedes cambiar la pregunta -->
            <h1 class="fw-bold">Quieres ser mi novia?❤</h1>
        </div>

        <div class="foto">
            <!-- Aquí puedes cambiar la imagen -->
            <img src="img/imagen.jpg" class="rounded w-25 p-2" alt="Fotito">
        </div>
        
        <div class="respuestas">
            <!-- Aquí puedes cambiar las respuestas -->
           
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="negativo" href="#" role="button">No</a>
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="positivo" href="#" role="button">Si</a>
        </div>

        
    </div>    
    
    <script >
        let respuestaSi=document.getElementById('positivo')
        respuestaSi.addEventListener("click",function(e){
            alert("Sabía que dirías que si ❤");
        })
        let respuestaNo=document.getElementById('negativo')
        respuestaNo.addEventListener("mousemove",function(e){
            let x = Math.round(Math.random()*93);
            let y = Math.round(Math.random()*93);
            respuestaNo.style.left = x+"%";
            respuestaNo.style.top = y+"%";
})
    </script> 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pregunta</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>
<body class="row align-items-center vh-100 text-center">

    <div class="container-fluid">
        
        <div class="pregunta">
            <!-- Aquí abajo puedes cambiar la pregunta -->
            <h1 class="fw-bold">Quieres ser mi novia?❤</h1>
        </div>

        <div class="foto">
            <!-- Aquí puedes cambiar la imagen -->
            <img src="img/imagen.jpg" class="rounded w-25 p-2" alt="Fotito">
        </div>
        
        <div class="respuestas">
            <!-- Aquí puedes cambiar las respuestas -->
           
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="negativo" href="#" role="button">No</a>
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="positivo" href="#" role="button">Si</a>
        </div>

        
    </div>    
    
    <script >
        let respuestaSi=document.getElementById('positivo')
        respuestaSi.addEventListener("click",function(e){
            alert("Sabía que dirías que si ❤");
        })
        let respuestaNo=document.getElementById('negativo')
        respuestaNo.addEventListener("mousemove",function(e){
            let x = Math.round(Math.random()*93);
            let y = Math.round(Math.random()*93);
            respuestaNo.style.left = x+"%";
            respuestaNo.style.top = y+"%";
})
    </script> 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pregunta</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>
<body class="row align-items-center vh-100 text-center">

    <div class="container-fluid">
        
        <div class="pregunta">
            <!-- Aquí abajo puedes cambiar la pregunta -->
            <h1 class="fw-bold">Quieres ser mi novia?❤</h1>
        </div>

        <div class="foto">
            <!-- Aquí puedes cambiar la imagen -->
            <img src="img/imagen.jpg" class="rounded w-25 p-2" alt="Fotito">
        </div>
        
        <div class="respuestas">
            <!-- Aquí puedes cambiar las respuestas -->
           
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="negativo" href="#" role="button">No</a>
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="positivo" href="#" role="button">Si</a>
        </div>

        
    </div>    
    
    <script >
        let respuestaSi=document.getElementById('positivo')
        respuestaSi.addEventListener("click",function(e){
            alert("Sabía que dirías que si ❤");
        })
        let respuestaNo=document.getElementById('negativo')
        respuestaNo.addEventListener("mousemove",function(e){
            let x = Math.round(Math.random()*93);
            let y = Math.round(Math.random()*93);
            respuestaNo.style.left = x+"%";
            respuestaNo.style.top = y+"%";
})
    </script> 
</body>
</html>

Origen Enlace

Mover botón con bootsrap

estoy realizando la página en donde va una pregunta y cuando responden "no" el botón de no se mueve por todo la página (es imposible darle click) y la única opción es darle a "si", ya tengo la interfaz hecha pero cuando quiero mover de lugar al botón de "no" a otra posición con Javascript, no funciona a pesar de que le ponga position-fixed pero eso hace que el botón de "si" y de "no" se ponga una encima de otra y no sé cómo separarlos para que no se vea feo, ya que si no uso el el position-fixed no se mueve el botón.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pregunta</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>
<body class="row align-items-center vh-100 text-center">

    <div class="container-fluid">
        
        <div class="pregunta">
            <!-- Aquí abajo puedes cambiar la pregunta -->
            <h1 class="fw-bold">Quieres ser mi novia?❤</h1>
        </div>

        <div class="foto">
            <!-- Aquí puedes cambiar la imagen -->
            <img src="img/imagen.jpg" class="rounded w-25 p-2" alt="Fotito">
        </div>
        
        <div class="respuestas">
            <!-- Aquí puedes cambiar las respuestas -->
           
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="negativo" href="#" role="button">No</a>
            <a class="btn btn-primary btn-lg fw-bold position-fixed" id="positivo" href="#" role="button">Si</a>
        </div>

        
    </div>    
    
    <script >
        let respuestaSi=document.getElementById('positivo')
        respuestaSi.addEventListener("click",function(e){
            alert("Sabía que dirías que si ❤");
        })
        let respuestaNo=document.getElementById('negativo')
        respuestaNo.addEventListener("mousemove",function(e){
            let x = Math.round(Math.random()*93);
            let y = Math.round(Math.random()*93);
            respuestaNo.style.left = x+"%";
            respuestaNo.style.top = y+"%";
})
    </script> 
</body>
</html>