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

Detailed explanation of the concept, principle and usage of MySQL triggers

This article uses examples to explain the concept...

How to use Linux paste command

01. Command Overview The paste command will merge...

The role and opening of MySQL slow query log

Preface The MySQL slow query log is a type of log...

The use of MySQL triggers and what to pay attention to

Table of contents About Triggers Use of triggers ...

js to achieve simple drag effect

This article shares the specific code of js to ac...

CSS realizes div completely centered without setting height

Require The div under the body is vertically cent...

DOCTYPE Document Type Declaration (Must-Read for Web Page Lovers)

DOCTYPE DECLARATION At the top of every page you w...

Detailed explanation of MySQL three-value logic and NULL

Table of contents What is NULL Two kinds of NULL ...

How to set default value for datetime type in MySQL

I encountered a problem when modifying the defaul...

Example code of setting label style using CSS selector

CSS Selectors Setting style on the html tag can s...

Vue Element-ui table realizes tree structure table

This article shares the specific code of Element-...