Code Ready | Frontend

✅ Как создать крутой hover эффект для меню?



Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Если его круто стилизовать, он будет привлекать больше внимания. ⬇️



Данный эффект сделан с помощью свойства border и псевдокласса hover, также для плавной анимации добавляется transition. Ниже делимся готовым HTML и CSS кодом для создания меню с hover эффектом.

<nav>

  <a class="link" href="#">Home</a>

  <a class="link" href="#">About</a>

  <a class="link" href="#">Contact</a>

</nav>

nav {

  padding: 24px;

  text-align: center;

  font-family: Raleway;

  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

  background: #3fa46a;

}

.link {

  transition: 0.7s ease;

  color: #fff;

  font-size: 20px;

  text-decoration: none;

  border-top: 4px solid #3fa46a;

  border-bottom: 4px solid #3fa46a;

  padding: 20px 0;

  margin: 0 20px;

}

.link:hover {

  border-top: 4px solid #ffffff;

  border-bottom: 4px solid #ffffff;

  padding: 6px 0; 

}

@code_ready | #обучение #html #css