Close

Tab style 12

This is another example of a web form with animated navigational tabs and a tab panel, designed using CSS and HTML. The tab panel buttons act as radio buttons in a clicked event. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The border of the panel is set with 5px solid #593082 The tabs are initially given the styles of padding as 10px, border as 2px solid #593082, margin as 0 5px 30px 0, font size as 20px, font-weight as 700, font color as #593082, background color as #fff, text-align as center, text-transform as uppercase to automatically transform it to uppercase, and position as relative In a clicked event, the panel button takes the color of #aee800 with a box shadow of 0 0 3px 1px rgba(0, 0, 0, 0.25) and a transformation value of scale(2) .The tab content section is given the styles of padding as 20px, font size as 15px, line-height as 30px, background color as #fff, and the font color as #7a9181. The transition value for the effect is set as all 0.3s ease.