During the process of building a website, I encountered a challenge in making buttons work seamlessly with other elements to ensure uniformity in appearance.
This issue often arises in menus, where some buttons are functional while others are simply linked to different pages. Another example is seen in forms, where buttons should match the size of other input fields.
Take a look at this jsFiddle link to grasp the concept. I aim to make buttons blend in with other elements!
Here's a snippet of code as per SO guidelines:
HTML:
Ensuring consistency in element sizes
<div id="menulike">
<button>DO SOMETHING</button>
<a href="#something">GO TO SOMETHING</a>
</div>
CSS:
div#menulike button, div#menulike a {
/*resetting default styles*/
border-style: none;
border-width: 0px;
text-decoration: none;
/*Inline or inline-block*/
display: inline;
display: inline-block;
/*color scheme and aesthetics*/
color: white;
font-weight: bold;
background: black;
/*Maintaining equal size is crucial*/
padding: 3px;
margin: 1px;
width: 220px;
font-size: 12pt;
text-align: center;
}