CSS implements a three-dimensional horizontal button menu effect-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS implements a three-dimensional horizontal button menu effect

不言

Jun 25, 2018 pm 05:05 PM

cssHorizontalthree-dimensional sense

This article mainly introduces CSS to implement a three-dimensional horizontal button menu effect code, which can realize the effect of mouse sliding over and presenting a button press. It has a strong 3D three-dimensional effect and involves CSS based on the hover attribute. For border setting tips, friends who need it can refer to

. This article describes the CSS code to implement a three-dimensional horizontal button menu effect. Share it with everyone for your reference. The details are as follows:

This is a horizontal and three-dimensional CSS button menu. It adopts the UL/LI structure commonly used in CSS and has a convenient layout. LI is defined as a button style. When the mouse is placed, it will display a three-dimensional menu. The overall visual experience is comfortable, the code compatibility is good, simple and efficient.

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>横向有立体感的CSS按钮式菜单</title>
<style>
#navigation {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
}
#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 4px;
}
#navigation li {
  display: inline;
}
#navigation a:link, #navigation a:visited { 
  margin-right: 2px;
  padding: 3px 10px 2px 10px; 
  color: #A62020;
  background-color: #FCE6EA;
  text-decoration: none;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #717171;
  border-right: 1px solid #717171;
}
#navigation a:hover {
  border-top: 1px solid #717171;
  border-left: 1px solid #717171;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}
</style>
</head>
<body id="contact">
<p id="navigation">
 <ul>
 <li class="recipes"><a href="#">脚本之家</a></li>
 <li class="contact"><a href="#">脚本下载</a></li>
 <li class="articles"><a href="#">网页特效</a></li>
 <li class="articles"><a href="#">官方博客</a></li>
 <li class="articles"><a href="#">友情链接</a></li>
 <li class="buy"><a href="#">联系我们</a></li>
 </ul>
</p>
</body>
</html>

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS3 to match horizontal and vertical screens

How to use CSS3 to achieve 3D flipping of books Effect

The above is the detailed content of CSS implements a three-dimensional horizontal button menu effect. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PM

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

How can we animate using CSS?Apr 30, 2025 pm 03:17 PM

Article discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.

Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PM

Article discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)