Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

72
Vistas
Animation hover on button in css to expand background color in horizontal and when leave coming strangulate in the center

I am trying to make same animated effect when hover on button. First of all I want when hover on button to expand background color black in horizontal of button I belive might I shoud use any transation property? Secondly When leave mouse hover on button background color strangulate like border-radius in the center of the button.

I have did until now to created a class btn and put same styles in tag head like code below. But when I leave mouse over on button background-color dont't strangulate in the center as I mentiod before.

<style>
    body {
        background: #2ecc71;
        font-size: 62.5%;
    }
    
    .container {
        padding: 2em;
    }
    /* GENERAL BUTTON STYLING */
    
    button,
    button::after {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    button {
        background: none;
        border: 3px solid #fff;
        border-radius: 5px;
        color: #fff;
        display: block;
        font-size: 1.6em;
        font-weight: bold;
        margin: 1em auto;
        padding: 2em 6em;
        position: relative;
        text-transform: uppercase;
    }
    
    button::before,
    button::after {
        background: black;
        content: '';
        position: absolute;
        z-index: -1;
    }
    
    button:hover {
        color: #2ecc71;
    }
    
    .btn-3::after {
        height: 0;
        left: 50%;
        top: 50%;
        width: 0;
    }
    
    .btn-3:hover:after {
        height: 100%;
        left: 0;
        top: 0;
        width: 100%;
    }
    /* BUTTON 4 */
</style>
<body>
    <div class="container">
        <button class="btn-3">Button 3</button>
    </div>

</body>

This is exactly what I want to create for button hover by the design UI/UX:enter link description here When hover display background-color: horizontal, after leave mouse hover coming background color strangulate in the center on the button.

By the Figma, I am talking for this button:[![enter image description here][2]][2]

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos