This is a template of a web form with breadcrumb buttons, designed using CSS and HTML. The buttons take a fill effect in a hover event. The Li element of lists has been used to display the buttons in a list. The breadcrumbs are initially given a general set of styles such as padding as 10px 0 0 0, display as inline-block, border-top as 4px solid #8633cb, overflow as hidden, float as left, border 1px solid rgba(0,0,0,0.1), border-radius as 5px, background as transparent, font size as 16px, font-weight as bold and font color as #000. The text transform is set as uppercase to automatically transform it to uppercase. The last child of the set is given the styles of padding as 3px 15px, background color as #8633cb, and font color as #fff. The other buttons take a fill effect of the color #8633cb when in a hover event.

This is a template of a web form with breadcrumb buttons, designed using CSS and HTML. The buttons take a fill effect in a hover event. The Li element of lists has been used to display the buttons in a list. The breadcrumbs are initially given a general set of styles such as float as left, margin-right as 5px, border as 2px solid #e66120, border-radius as 10px, background color as #e66120, font size as 14px, font-weight as bold and font color as #fff. The last child of the set is given the styles of padding as 10px 15px, background color as #fff, and font color as #e66120. The display is set as block for all the buttons.

This is another template of a web form with breadcrumb buttons, designed using CSS and HTML. The Li element of lists has been used to display the buttons in a list. The last child of the set is given the styles of padding as 7px 15px, font color as #fff, background color as #188c9c, and a position as relative. The text-transform is set as uppercase to automatically transform it to uppercase. Other buttons are given a similar set of styles with the display is always set as block and font-weight set as bold.

This is a template of a web form with breadcrumb buttons, designed using CSS and HTML. The buttons take a fill effect in a hover event. The Li element of lists has been used to display the buttons in a list. The last child of the set is given the styles of padding as 5px 15px, font size as 15px, font-weight as bold, color as #fff, background as #ff0000, border-radius as 10px, and a border of 1px solid #ff0000. The other buttons are given a similar set of styles except for the border 1px solid #909090 and the font color #ff0000. In a hover event, the buttons take the color of #ff0000 and transform the text color to #fff with a transition of all 0.3s ease 0s. The circular-shaped buttons that are connected to the breadcrumbs have the styles of width and height as 18px, border-radius as 50% to get the circular shape, background color of #fff and a border of 4px solid #ff0000

This is another example of a web form with a progress bar with the progress value shown above the bar, designed using HTML and CSS. Class progress-bar of the progress class has been added into the code to create and style the progress bar. The label of the progress bar has the styles of padding as 3px 10px, font size as 14px, font weight as 700, color as #282828, line height as 22px, letter spacing as 1px, text align as center, and text transform as uppercase to automatically transform it to uppercase, background color as #fff, and box shadow as 0 0 8px 2px rgba(0, 0, 0, 0.14). The progress line is given a color of #fff, height as 6px, margin top as 70px, and an overflow as visible whereas the bar is given the styles of border radius as 5px, and an animation of animate-positive 2s, The progress value number is given an initial set of styles as width as 50px, height as 25px, font size as 14px, line height as 25px, font color as #fff, border radius as 4px and a font weight of 600. . Each progress value number is given a background color of #ff007f, #73cd21, #2e9ce0, and #eea921, respectively

This is another template of a web form with a progress bar, designed using HTML and CSS. Class progress-bar of the progress class has been added into the code to create and style the progress bar. The body is given a background color of #dad9d4. The label of the progress bar has the styles of font size as 15px, background color as #fff, width as 20%, height as 100%, border radius as 100px 0 0 100px, font color as #000, line height as 40px, letter spacing as 1px, text align as center, and text transform as uppercase to automatically transform it to uppercase. The progress line is given a color of #fff, border radius of 100px, and margin top as 40px whereas the bar is given the styles of border radius as 0 100px 100px 0, font size as 15px, font weight as bold, line height as 40px, text color as #fff, and an animation value of animate-positive 2s. Each progress value number is given a background color of #ec4251, #73cd21, #2e9ce0, and #eea921, respectively.

This is another example of a web form with a progress bar with the progress value shown below the bar, designed using HTML and CSS. Class progress-bar of the progress class has been added into the code to create and style the progress bar. The body is given a background color of #2c304a. The label of the progress bar has the styles of font size as 18px, font weight as 700, color as #fff, and margin as 0 0 20px. The progress line is given a color of #171b3c, border radius of 20px, border of 1px solid #000, box shadow of 0 2px 2px #4f4c4c, margin bottom as 40px, and an overflow as visible whereas the bar is given the styles of border radius as 20px, a border as 1px solid #000, a web kit animation of animate-positive 2s, and an animation value of animate-positive 2s. The progress value number is given an initial set of styles as font size as 15px, line height as 25px, width as 6px, height as 25px, background color as #171b3c, font color as #fff, border radius as 0 0 15px 15px, and a box shadow as 0 2px 2px #4f4c4c.

This is another example of a web form with a progress bar with dotted lines, designed with HTML and CSS. The class progress-bar of the progress class has been added into the code to create and style the progress bar. The label of the progress bar has the styles of font size as 18px, font-weight as 700, color as #000, letter-spacing as 2px, margin as 0 0 30px, and text-transform as uppercase to automatically transform it to uppercase. The progress line is given a color of #000, and an overflow as visible whereas the bar is given the styles of background as #fff, border-top width as 10px, border style as dotted, a web kit animation of animate-positive 2s, and an animation value of animate-positive 2s. The progress value number is given an initial set of styles as font size as 18px, font-weight as 700, font color as #000, top as -32px, right as -5px, and position as absolute.