9 exquisite and unique CSS3 menus and buttons_html/css_WEB-ITnose

1. Super three-dimensional CSS3 3D menu menu items with small icons

I remember sharing many CSS3 3D menus with you before, such as CSS3 The 3D animated menu, 3D cube menu item and HTML5/CSS3 custom drop-down box 3D card folding animation have beautiful effects. Today we are going to share another cooler CSS3 3D menu. This menu lies on its side on the page, and each menu item has a nice little icon.

Online demo

Source code download

2. Pure CSS3 three-dimensional animated menu menu items have inner shadow when pressed

This time I will share a three-dimensional animated menu implemented using pure CSS3. The menu is very simple to implement and does not have many special effects rendering, but it looks very clean and beautiful, especially with the gray and black background. , making the menu look a bit three-dimensional. In addition, when we click on the menu item, the menu item will have the visual effect of inner shadow.

Online demo

Source code download

3. HTML5/CSS3 cool ring animation menu

Today we are going to share a very creative HTML5/CSS3 animated menu. The menu is circular. When the mouse clicks on the center button, the submenus will expand around it, accompanied by a cool menu expansion animation.

Online demo

Source code download

4. A set of cool CSS3 3D buttons with definable size and color

Today we are going to share a super cool CSS3 3D button. The design of this 3D button is also very simple and supports 3 different colors and 3 different sizes.

Online demo

Source code download

5. HTML5/CSS3 animated drop-down menu submenu is cool

Today we are going to share a very effective CSS3 drop-down menu. It has a similar function to other CSS3 drop-down menus. When the mouse slides over the main menu, it will drop down to expand the submenu. At the same time, the submenu has a good animation effect when it expands. This animation should be called rectangular expansion animation.

Online demo

Source code download

6. CSS3 black theme menu menu item fade-in and fade-out animation

Since the menu applies CSS3 features, a shadow effect will appear on the edge of the menu, giving a three-dimensional visual effect. Another feature is that when the mouse slides over the menu items, a fade-in and fade-out animation effect will appear. It is a very good CSS3 black theme menu.

Online demo

Source code download

7. CSS3 ball floating button ball rolling is very realistic

Today I want to share a very unique CSS3 animated button. It is different from ordinary buttons and does not look like ordinary buttons. This button is composed of 7 dots. Every time one of the small dot buttons is clicked, the small ball will It will roll to the corresponding position, the ball has a projection, and the rolling effect is also very realistic.

Online demo

Source code download

8. CSS3/SVG texture background small icon hollow effect icon button

Today we will share a small icon with a textured background implemented using CSS3 and SVG. When the mouse slides over the icon, a hollow effect will appear, and there is a textured background stroke. The effect is very good.

Online demo

Source code download

9. CSS3 3D luminous switch button simulation effect is very realistic

We have just released a CSS3 switch sliding button, which should have a somewhat 3D effect, but the rest is very ordinary. Now we are going to share a cooler CSS3 switch button. It not only has a 3D effect, but also can emit light. When the switch is on, the small light next to it will light up, and then the light will be projected onto the switch. The effect Quite realistic.

Online demo

Source code download

Fixed link to this article: http://www.i7758.com/archives/1311.html