CSS3 to achieve menu hover effect

CSS3 to achieve menu hover effect

Result:

html

<nav id="nav-1">
  <a class="link-1" href="#">Home</a>
  <a class="link-1" href="#">About</a>
  <a class="link-1" href="#">Contact</a>
  <a class="link-1" href="#">Shop</a>
</nav>

<nav id="nav-2">
  <a class="link-2" href="#">Home</a>
  <a class="link-2" href="#">About</a>
  <a class="link-2" href="#">Contact</a>
  <a class="link-2" href="#">Shop</a>
</nav>

<nav id="nav-3">
  <a class="link-3" href="#">Home</a>
  <a class="link-3" href="#">About</a>
  <a class="link-3" href="#">Contact</a>
  <a class="link-3" href="#">Shop</a>
</nav>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#nav-1 {
  background: #3fa46a;
}
#nav-2 {
  background: #5175C0;
}
#nav-3 {
  background: #EEA200;
}

.link-1 {
  transition: 0.3s ease;
  background: #3fa46a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
.link-1:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0; 
}

.link-2 {
  transition: 0.6s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-right: 2px dotted transparent;
  padding: 30px 8px 0 10px;
  margin: 0 10px;
}
.link-2:hover {
  border-right: 2px dotted #ffffff;
  padding-bottom: 24px;
}
.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.link-3:hover {
  background-color: #ffffff;
  color: #EEA200;
  padding: 24px 10px;
}

The above is the details of how to achieve menu hover effect with CSS3. For more information about CSS3 menu hover, please pay attention to other related articles on 123WORDPRESS.COM!

<<:  Analysis and solution of the reasons why HTML external reference CSS files are not effective

>>:  Implementation example of Docker deployment of front-end and back-end separation projects

Recommend

Example code for implementing dynamic column filtering in vue+element table

Requirement: When displaying data in a list, ther...

Example to explain the size of MySQL statistics table

Counting the size of each table in each database ...

HTML symbol to entity algorithm challenge

challenge: Converts the characters &, <, &...

vue-amap installation and usage steps

I have previously shared the usage of asynchronou...

MySQL query optimization using custom variables

Table of contents Optimizing sorting queries Avoi...

Detailed explanation of Linux Namespace User

User namespace is a new namespace added in Linux ...

How to use Xtrabackup to back up and restore MySQL

Table of contents 1. Backup 1.1 Fully prepared 1....

How to find the specified content of a large file in Linux

Think big and small, then redirect. Sometimes Lin...

mysql 8.0.15 winx64 decompression version graphic installation tutorial

Every time after installing the system, I have to...

Sample code for a large drop-down menu implemented in pure CSS

This is a large drop-down menu implemented purely...

How to install Maven automatically in Linux continuous integration

Unzip the Maven package tar xf apache-maven-3.5.4...

MySQL limit performance analysis and optimization

1. Conclusion Syntax: limit offset, rows Conclusi...