This is a template of a page navigation button line, designed with CSS and HTML. The buttons are set to get highlighted and pointed with an arrow mark in a focus event. The Li element of lists has been used to display the buttons in a list. The set of buttons is given the styles of font-family as 'ABeeZee', sans-serif, display as inline- flex, and position as relative. The button numbers have the styles of color as #444, background color as transparent, font size as 23px, font-weight as 600, line-height as 42px, transition of all 0.3s ease 0s, border radius of 50% to make the circles, and height and width as 42px. The text color will turn to #6c5ce7 in a focus event and the number button will get highlighted with a box shadow set as 0 0 20px 5px #6c5ce7. In a focus event, the transformation happens with translate (-50%) translateX (-50%) scale(0.8) style. The shape of the highlight event has been specified with a polygon element added to the code with WebKit-clip-path: polygon.
This is a template of a page navigation button line, designed with CSS and HTML. The buttons are set to get highlighted in green color, in a focus event. The Li element of lists has been used to display the buttons in a list view. The set of buttons is given the styles of font-family as 'Gugi', cursive, padding as 7px 15px, border-bottom as 2px solid #909090, box-shadow as 0 5px 5px -7px #000, display as inline- flex, and position as relative. The button numbers have the styles of color as #444, background color as transparent, font size as 25px, font-weight as 700, line-height as 35px, transition of all 0.3s ease 0s, and height and width as 40px and 65px respectively. The text color will turn to #fff in a focus event and the number button will get highlighted in #3eed23 color. The animation transformation is set with translateX (-50%) translate (50%).
This is another example of a page navigation button line, designed with HTML and CSS. The buttons take a highlight action in a focus event. The Li element of lists has been used to display the buttons in a list. The set of buttons is given the styles of background color as #341f97, font-family as 'Kodchasan', sans-serif, padding as 5px, display as inline- flex, and position as relative. The button numbers have the styles of color as #fff, background color as #5f27cd, font size as 24px, letter-spacing as 1px, text-shadow as 1px 1px 0 rgba(0, 0, 0, 0.2), line-height as 37px, height and width as 42px, and a border of 3px solid transparent. The text-transform is set as uppercase to automatically transform it to uppercase. The buttons will get highlighted in a focus event, taking a transformation of scale (1.3).
This is an example of a page navigation button line, designed with CSS and HTML. The buttons take a highlight action in a focus event. The Li element of lists has been used to display the buttons in a list view. The body is given a background color of #A2DCF0 whereas the set of buttons is given the styles of font-family as 'Kodchasan', sans-serif, border-radius as 40px, overflow as hidden, display as inline- flex, and position as relative. The button numbers have the styles of color as #505050, background color as transparent, font size as 25px, font-weight as 600, padding as 10px 20px, and a transition of all 0.3s ease 0s. The buttons will get highlighted in a focus event, taking the color of #E24A3C. The buttons have a transform style of scaleY (0) and a transition of all 0.3s.
This is another template of a page navigation button line, designed with CSS and HTML. The buttons take a highlight action in a focus event. The Li element of lists has been used to display the buttons in a list. The body is given a style set of background color as #142328 whereas the set of buttons is given the styles of font-family as 'Kodchasan', sans-serif, border-radius as 40px, border-color as 2px solid #FE1739, display as inline- flex, and position as relative. The buttons will get transformed in a focus event with its transform style set to skewX (-16deg) scale(1). The numbers have been given a color of #fff, font-size as 22px, font-weight as 600, height and width as 45px and 55px, text-align as center and a transition of all 0.3s ease 0s.
This is a template of a page navigation button line, designed with CSS and HTML. The Li element of lists has been used to display the buttons in a list. The body is given a style set of font-family as 'Noto Sans', sans-serif, display as inline- flex, and position as relative. The numbers have been given a color of #2980b9, font-size as 22px, font-weight as 600, height and width as 45px, and a transition of all 0.3s ease 0s. The next and previous buttons take the color of #2c3e50 in a focus event. The shape of the highlight event has been specified with a polygon element added to the code with WebKit-clip-path: polygon. A transition rate is added with a transition: all 0.3s ease 0s.
This is a template of a page navigation button line, designed with CSS and HTML. The Li element of lists has been used to display the buttons in a list. The body is given a style set of color as #0abde3, font-family as 'Noto Sans', sans-serif, display as inline- flex, and position as relative. The next and previous have the initial styles of color as #fff, background color as transparent, font-size as 22px, font-weight as 600, height and width as 44px, and a transition of all 0.3s ease 0s. The animation of a background circle in a hover event has been added by transform: translateX (-50%) translate (50%) rotate (90deg) with its background color set to #fff, height and width to 28px, and a transition of all 0.3s. Border radius has been added as 50% to make it a circle and transform-origin is set to top center to make it appear from top center.
This is an example of a timeline view in a list view, designed with CSS and HTML. The body is given a style set of color as #D3D7D8, font-family as Roboto', sans-serif, padding as 20px 100px, position as relative and overflow as hidden. The icons have been imported to the form with the CSS framework Font Awesome. The icons have been assigned a style set of background color as #e7e7e7, font size as 80px, text-align as center, line height and height as 130px and width as 160px. Each timeline year label has been assigned a border color of #FF9389, #FDCC4C, #ADEEC3, and #7AB8DD, which are also used as background colors combined with linear gradient colors, respectively. The timeline years icons also have the styles of color as #fff, font size as 70px, font-weight as 600, text-align as center, text-shadow as 2px 2px 5px #000, border-radius as 50% making them circles, height and width as 200px whereas label titles have the styles of color as #808080 and text-transform as capitalize to make the first letter of each word capital.
This is an example of a horizontal timeline view with animated icons, designed using CSS and HTML. The colors of the labels and form have been declared as var variables in CSS so the same variable can be reused in several places easily. Those values are; white:#fff, black:#000, color_1: #EA2027, color_2: #1F5295, color_3: #89b743, and color_4: #e02a6d. The body of the form is given a style set of font-family of 'Niramit', sans-serif, and display as block. Each timeline label has been assigned a color of color_1, color_2, color_3, and color_4 to get a combination of linear-gradient colors. The timeline year is given the styles of color as white, font size as 35px, and font-weight as 600, and text-align as center. The title of the label is given a style set of font size as 25px, and font-weight as 600 and the label description a style set of color as #333, and font size as 15px. A rotating animation is given to the icons by timeline-icon {transform: rotate (360deg).
This is a template of a timeline view with its labels spread around the timeline tree, designed with CSS and HTML. The colors of the labels and form, have been declared as var variables in CSS so the same variable can be reused in several places easily. Those values are; white:#fff, black:#222, color_1: linear-gradient(to right,#E7007B,#E7007B,#BF1424,#BF1424), color_2: linear-gradient(to right, #F04302,#F04302,#FC8819,#FC8819), color_3: linear-gradient(to right, #99C840, #99C840, #DEE420, #DEE420),andcolor_4:linear-gradient(to right, #0994C1, #0994C1, #70B1A5, #70B1A5). The body of the form is given a style set of font family of 'Niramit', sans-serif, padding of 40px 0 20px, margin of 20px 0, and a position as relative. Each timeline label has been assigned a color of color_1, color_2, color_3, and color_4 to get a combination of linear gradient colors. The title of the label is given a style set of font size as 20px, font weight as 500, letter spacing as 1px, padding as 10px 20px, and text transform as uppercase to convert the text to uppercase whereas the timeline year is given the styles of font size as 30px, and font weight as 700. The icons have been imported to the form with the CSS framework Font Awesome.
This is a template of a timeline view with its labels spread around the timeline tree, designed using HTML and CSS. The body of the form is given a background color of #0B3E41, font family of 'Oxygen', sans-serif, and a position as relative. The icons are given a height and width of 70px, line-height as 70px, a color of #0C3F42, a font size of 40px, text-align as center, border-radius as 50% to make the icon a circle, and position as absolute. Each timeline label has been assigned a color of #FEC93F, #55b0ed, #ff665b, and #2ecc71, respectively. The title of the label is given a style set of background color as #0C3F42, font size as 25px, font-weight as 800, letter-spacing as 1px, padding as 10px 10px, and text transform as uppercase to convert the text to uppercase always. The label description has been given a style set of font size as 15px and letter spacing as 1px. The font size of the main timeline title is set as 20px. The icons have been imported to the form with the CSS framework Font Awesome.
This is another template of a timeline view designed using HTML and CSS. The form is given a background color of #e7e7e7, font family of 'Titillium Web', sans-serif, padding of 50px 0 0, and position as relative. Each timeline year has been assigned a solid border and a background color of #FF9B00, #FF503B, #009CE6, and #B160BD, respectively. The title of the label is given a style set of background color as #333, font size as 25px, font-weight as 600, and text transform as uppercase to convert the text to uppercase always. The label description has been given a style set of font size as 14px, color as #333, and letter spacing as 1px. The font size of the main timeline title is set as 18px. The icons have been imported to the form with the CSS framework Font Awesome.