I am currently working on a project that aims to investigate how older individuals interact with flat design compared to skeuomorphic design. As part of this study, I intend to create a 3D and realistic menu. While searching for a suitable pre-made button, I encountered an issue where attempting to orient the button vertically resulted in the shadow overflowing the parent element without affecting the background. The code snippet below illustrates the styling applied to the horizontal button:
HTML:
<a class="button">
<span>TEXT FOR BUTTON</span>
</a>
<a class="button">
<span>BUTTON 2</span>
</a>
<a class="button">
<span>ANOTHER BUTTON</span>
</a>
<a class="button">
<span>LAST BUTTON</span>
</a>
CSS:
.button {
display: inline-block;
margin: 5px;
width: auto;
-webkit-border-radius: 10px;
-webkit-box-shadow:
/* Multiple layers of gradient effects */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
/* Styling for button text content */
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
}
/* Additional styles for hover and active states are included */
The link provided shows the vertical alignment issue experienced when applying the same styles to a vertical button:
HTML:
<div class="container">
<a class="button">
<span>TEXT FOR BUTTON</span>
</a>
<a class="button">
<span>BUTTON 2</span>
</a>
<a class="button">
<span>ANOTHER BUTTON</span>
</a>
<a class="button">
<span>LAST BUTTON</span>
</a>
</div>
CSS:
.container {
float: left;
height: 100%;
margin-right: 30px;
}
.button {
/* Different styling properties from horizontal buttons */
}
.button span {
/* Similar to horizontal button span styles */
}
/* Hover, active state styles remain consistent */
If you can offer any insights or assistance in resolving this inconsistency between the two button orientations, it would be greatly appreciated!