Navigation buttons
Used to move forward, back or to submit a form.
How to use this component
These buttons should be used for the main navigation between form pages/panels. These should appear at the bottom left of the form.
The back button should always appear before next and submit.
Reset / clear data buttons
We prefer to avoid using a reset button. If it is a requirement then the reset button should be placed away from the submit and navigation buttons and must prompt a user to confirm they would like to reset the form first.
This will help to avoid any unecessary mistakes by accidently clearing a form.
Code Resource
<input type="submit" name="Back" value="Back" id="back" title="Back" class="cc_tab">
<input type="submit" name="Next" value="Next" id="next" title="Next" class="cc_tab">
<input type="submit" name="Submit" value="Submit" id="submit" title="Submit" class="cc_tab">.cc_tab {
color: #fff!important;
background-color: rgb(7,120,134);
font-size: 16px;
font-weight: 400;
padding-left: 25px;
padding-right: 25px;
text-align: center;
margin-top: 12px;
margin-bottom: 0px;
display: inline-block;
-webkit-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.75);
transition: all 0.5s ease;
background-size: 200% 100%;
background-position: right bottom;
cursor: pointer;
line-height: 30px;
float: left;
margin-right: 5px!important;
padding-top: 9px;
padding-bottom: 9px;
border: 0px;
border-radius: 3px;
font-size: 1.1em;
}
.cc_tab:hover, .cc_tab:focus, .cc_tab_active {
background-color: #01383f!important;
text-decoration: none!important;
background-position: left bottom!important;
}