Mar 24, 2021
Adventures in UX Design: .001
I have had an understanding of HTML for quite some time. An ability to read it, understand basically what is going on but no clue how to fix problems. During my Adventures in UX Design, I not only have been experimenting with HTML but CSS! The problem I ran into was over a simple button.
The problem I established is the main button CSS style conflicts with the footer’s background, as seen in the picture above. The first attempted solution was to isolate the button and create an additional set of styles for it. Developing the individual style would require adding other styles such as the button hover, activation, and more. The main issue during learning CSS is how to isolate a specific element. Isolating the button needed an additional class identifier (class=”button email”) in the CSS file.
After some further contemplation and brainstorming with a few online UX/UI communities, a user mentioned, “why not create a shadow?” This sparked an idea, CSS style that works for both locations. Is the shadow the correct answer? No, I find it a little messy looking but adding a fill, outline, and updating the text color will make the button work in all locations. In the following style, the background matches one scene but contrasts in another, and the border does the opposite.
The final results in accomplishing the goal and keeping the code streamlined. With one style for the buttons that work globally instead of isolating several types of buttons. When stumped, I find it best to bounce ideas off of other people. Two heads are better than one! The final buttons are displayed below.
