credits - https://codepen.io/MilanMilosev/pen/JdgRpB
This is an example for a search button designed with HTML and CSS. The complete page background class has been set with the value of #252525, the width and the height as 100%. In order to hide the text input field, the input type of text element is used with different values to occur on different states. When it is initially loaded, the width is set to 50px which means it will be on the bottom layer of the search button. On the event of focus, it will set the width to 300px which will make it visible to the user. The placeholder of the text field has been set with the use of the placeholder CSS class, setting the color as white, opacity as 0.5 and font weight as bolder. The shade of the text box has been implemented with the values of 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2) set to the box shadow class.
This is a small search button animation with the use of the HTML and CSS. Mouse hover animation has been used with the hover class in CSS. The transform class has been used with the value of rotate set to 520 so the animation could happen on the Z axis. The background color of the entire page has been set with the value of #ffd8d8 to the background color class. The input type of text element has been set with the styles of width as 100%, height as 96px, font size as 60px and line height as 1. The color of the placeholder in the textbox has been set with the value of #e16868 for the font color. In order to apply the ease in effect on the mouse hover, the transition class has been used with the value of 0.5s ease all.
credits - https://codepen.io/himalayasingh/pen/dqjLgO
Whether it is "traditional top bar" navigation or sticky navigation at the bottom or sides, we can have animations for the menu when selected. These animations can be blended with all types of navigation bars. We are looking at the series of collections of animations used for the menu items in a navigation bar. This is the third example in this series; the code uses the combination of HTML and CSS to create the animation. It is a simple navigation bar with a menu like any other blog. Check out the menu when you trigger the hovering event, this will create a left border along with the text of the menu. The font and other styling properties are perfect matches for any format website. These animations give a special effect to navigation bars. You can use this kind of animations for your personal website.
This is an excellent example of animations used in the navigation bar. This effect is due to the simple combination of the HTML and CSS styles. This is a simple navigation bar with menu added to it. Once you trigger the hovering event on any menu, you would see the top border moving down while the left border appears along the left side of the text. This is achieved by setting the height and width property of borders before and after the hovering event. This can be used in a traditional top bar or any sticky navigation bar located at the bottom or sides of the website. You can use this snippet with any website, as the font and the properties used, can be a perfect blend with any website. You can have multiple animations by changing the border properties and see to yourself for the ideal animation effect for your webpage.