![]() This is probably the most common button styling that I see on web3 sites such as Sushi Swap and Buildspace. Gradient backgroundīackground-image: linear-gradient(to right, rgb(1 134 218), rgb(182 49 167)) See this in action on The Graph's landing page. Again, this is a small change that actually makes a big difference in the experience.īackground-color: rgba(var(-primary-color), 0.35) īorder: 1px solid rgba(var(-primary-color), 0.5) Let's make the colors a tiny bit brighter on hover. Let's also use the glow effect on this one.īackground-color: rgb(var(-primary-color)) īorder: 1px solid rgb(var(-primary-color)) īackground-color: rgba(var(-primary-color), 0.15) īorder: 1px solid rgba(var(-primary-color), 0.25) A simple 0.3s transition makes a huge difference. We will add modifier classes later to create different styles.īox-shadow: rgba(var(-primary-color), 0.5) 0px 0px 20px 0px Let's also define the base styling of the button. These are rgb colors that we will later on use with different opacity levels. Button styles to create the web3 lookĪll these effects can be found in this codepen.įirst, let's define the colors we'll be using. Now that we have some text effects, let's move on to buttons. Use the gradient to emphasize certain words in a phrase. The added bold font weight makes it stand out even more. Rare Blocks also uses it to emphasize words in a paragraph. Gradient background effectīackground: linear-gradient(to right, #30CFD0, #c43ad6) īuildspace uses this style to emphasize words in a heading. The Graph uses this effect a lot, and I'm here for it! 2. You can use this effect for headings, or to emphasize a certain word in a heading, or as a hover effect for links. In each of these examples, we have a dark background and white text over it. Let's go through how we can apply these styles to texts, buttons and backgrounds. Bright and white text over a dark background.Taking inspiration from The Graph, ARCx Money, Rabbithole, Sushi Swap, Buildspace (among others), here are some simple styles you can add to your app: They all have some common designs that achieve this look. This dark mode web3 aesthetic looks very cool and futuristic.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |