How to write Button HTML code :
A html to create a button can be write between start button element tag <button> and end button element tag </button> , Must write type="button" and class="btn" to tell the browser this a button element.
also mention the button unique class name of your choise to for the unique
identity in different project.
Example is given below :
<button type="button" class="btn uniquebuttonclass"> Button Name
</button>
Link Button HTML code
Just put the button between link start element <a> and link close
element </a>
example are given below:
<a type="button" class="btn uniquebuttonclass" href="#link-goe-here
">Button Name </a>
CSS code for Button Styling
.button {
position: Relative;
margin :40px;
font-size:12px ;
background:#780000;
border:0px;
outline:none;
padding: 6px !important;
color:#fff!important;
cursor: pointer;
}
Now here , We can set the value of styling items as per your requirements.
Button Styling on hover effect :
We may create the certain effect when the mouse cursor goes over the
button.
example are given below:
.button:hover {
background:#000000;
color:#fff;
outline:1px;
transform: scaleX(1.2);
border:1px solid #eee;
text-decoration: none;
}
Button Styling on Active status :
We may create the certain effect when button will be in active status,
Active means untill the button being clicked or pressed the effect applied
in that certain time. Must use to create mobile effect , as there is no
hover effect visible in mobile view in lake of clicking so Active styling
can be used for that.
example are given below:
600
.button:active {
background:#000000;
color:#fff;
outline:1px;
transform: scaleX(1.2);
border:1px solid #eee;
text-decoration: none;
}
Button Styling focus used for after click effect :
We may also create the after click effect for button , the effect can be
seen for button after click until not clicked again anywhere of the webpage.
Useful for drop dropdown or accordion function type button. this
effect not working when click outside .
Disadvantage- with the focus tag , effect not disappear on
double click over the menu/button tab. that is the negative side with focus.
example are given below:
.button:focus {
background:#000000;
color:#fff;
outline:1px;
transform: scaleX(1.2);
border:1px solid #eee;
text-decoration: none;
900
style the dropdown ul class main menu when the chil dropdown menu open working for bootstrap menu only :
This code working for bootstrap dropdown menu either for button
segment and navbar segment , difference is just change the main class to
see effect on both segment , well i am writhing a common code here which
work for both segments :
-- this effect work for both click and touch device
-- the given CSS effect visible when click the main ul /button tab.
-- the effect will disappear on double click on the ul/button tab, that
doesn't happened with focus tag.
Grab the code below and enjoy designing :
600
.dropdown-toggle[aria-expanded="true"] {
background:#eeeeee;
border-bottom:3px solid #015FFA;
color: #a50000;
}
700
