suicidedog
KPCKevin Powell - Community
•Created by suicidedog on 11/3/2023 in #front-end
Button borders and best practice in a design system
Hello. I'm trying to translate our UX-designers design into working buttons using scss.
They have a default state without a border, and recieves a border on :hover and on :focus. This makes the buttons take up extra space, which visibly make em dance in a way I'd like to avoid (pushing elements close to them away).
The button will be a part of a design system, the point is to make the buttons available to pretty much copy paste into other projects and work as intended.
Right now Im just presenting the buttons side by side on how they should look.
So my question is best practice approaches to the problem.
-I thought about adding a transparant border to the default state, but I am not sure if this will change the intended design och if its an accessibility issue?
(And if it's a unnecessary solution to a non important problem, i.e looking nice togheter with other elements )
-is there away to instead borrow whitespace, from example a gap or margin, instead of pushing other elements.
For example if I have a 10px gap between my buttons, when a button takes up extra 2px from receiving a border, the gap shrinks to 8px;
-is outline semantically equivalent to border. Is it ok to switch between them interchangeably. Or otherwise is placing an inner-border an okey solution?
Thanks in advance for your input:)
8 replies
KPCKevin Powell - Community
•Created by suicidedog on 4/12/2023 in #front-end
simple CSS animation of sliding into view and out of view, and how to approach it
so i want to make a simple animation of a box with content in it (similair to a spam popup "singles in your area" type of feel) moving in from bottom of the screen (what the user sees without scrolling), take up about about 1/6 of the screen and then after a click somewhere (button?) , animate out again.
i think i can solve the javascript on my own. but im unsure on how to CSS animate it and how to make the box responsive on mobile or desktop.
im guessing there are different ways to approach it, so id appriciate if you could name some of em just to get me started, or give me your general approach on how to solve it. (bonus points if you know some resource online to practice css animations on)
im guessing there are different ways to approach it, so id appriciate if you could name some of em just to get me started, or give me your general approach on how to solve it. (bonus points if you know some resource online to practice css animations on)
4 replies