Code Ready | Frontend

✅ Как создать анимированные hover кнопки?



Hover кнопка - кнопка которая при наведении становится анимированной и делает интересные эффекты. С помощью hover можно воплотить свои крутые идеи.



☑️ Ну а мы оставляем HTML & CSS код ниже, для создания двух кнопок с крутым эффектом. (Кода достаточно много) ⤵️

<div class="buttons">

    <button class="close">Close</button>

    <button class="offset">Offset</button>

  </div>

body {

  background: hsl(227, 10%, 10%);

  font: 300 30px 'Fira Sans', sans-serif;

  display: flex;

  justify-content: center;

  margin-top: 20%;

}

.close:hover, .close:focus {

  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);  

}

.offset {  

  box-shadow: 

    0.3em 0.3em 0 0 var(--color),

    inset 0.3em 0.3em 0 0 var(--color);

  &:hover, &:focus {

    box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);

  }

}

$colors: ( 

  close: #ff7f82,

  offset: #19bc8b

);

@each $button, $color in $colors {

  .#{$button} {

    --color: #{$color};

    --hover: #{adjust-hue($color, 45deg)};

  }

}

button {  

  background: none;

  border: 2px solid;

  font: inherit;

  margin: 1em;

  padding: 1em 2em;

  color: var(--color);

  transition: 0.75s;

  cursor: pointer;

  &:hover,

  &:focus { 

    border-color: var(--hover);

    color: #fff;

  }

}

@code_ready | #практика #html #css