Simple css raise background4/28/2024 ![]() What is important there are the 3 following CSS properties : ![]() We mainly want to break down the raised effect to see what happens when you hover the button with your mouse. ![]() We won't also talk much about the button's aesthetics and colors, because it is quite peronal and related to the kind of project you are working on. button-wrapper element since it is just here to give some additional spacing to our button. We won't need much CSS to finish our button. Now, we have everything we need to style and finish our button. Finally, we declare our main box shadow variable ( $purple-box-shadow), that mixes the other box shadow variables that we created earlier. Then we declare 2 variations of our purple color shadow, one being twice opaque than the other. RGBA adds the Alpha Channel (handles transparency) to the RGB format. What are we doing here ? we are first declaring a base shadow, that is basically just a shade of black color expressed in rgba format. If you don't know this CSS property, you can read this article to learn more about it. We are going to use the CSS box-shadow property for our raised effect. The second part is where the things get interesting. $base-shadow, 0 8 px 10 px -5 px $purple-shadow-to įirst, we declare the 3 colors that we are going to need. $purple-box-shadow : 0 14 px 26 px -12 px $purple-shadow-from, 0 4 px 23 px 0 px
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |