HTML5 & CSS3: another 3D buttons
TL;DR: CSS 3D buttons with multiple box-shadow
Inspired by Fancy 3D-Button on CSSDesk and it’s idea of multiple box shadow I created my own set of 3D buttons with pretty simple CSS, here’s the link: 3D buttons — beginnings. Very helpful was CSS3 Box Shadow Generator, especially that everything is explained in chapter “Box Shadow Explained” which can be found below the result of generation.
Inspirations
In my spare time I like to search for amazing things that people do mostly only with pure CSS. Once I found Fancy 3D-Button on CSSDesk (later I found Bootstrap theme loosely based on similar idea: Lumen from Bootswatch.com by Thomas Park) and I felt inspired as almost never before. So I have decided to create an account on CSSDesk to play with CSS on my own.
Having fun with box-shadow CSS property
Crux of the matter why I was so impressed by Fancy 3D-Button was simple and clever trick described by the author in description on his lab — we can use multiple box-shadows on one element. One can be responsible for shadow itself and second can be used to change button height.
Creating my own simple set of CSS only 3D buttons
So, with awareness that we need some of Object-Orientated CSS (article by Todd Motto) to make stylesheets more maintainable and, what is most important, more readable, I have created button base class:
.button{
border-radius: 7%;
border: 0px;
padding: 10px 10px 10px 10px;
color: whitesmoke;
cursor: pointer;
font-size: 1em;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}Then I started to play with box-shadow with CSS3 Box Shadow Generator because I don’t want to reinvent a wheel, and with this generator I got visual feedback which helped me a lot. Here’s how CSS looks for button-success:
.button-success{
background: linear-gradient(to bottom, lightgreen 0%, green 100%);
background: -webkit-linear-gradient(to bottom, lightgreen 0%, green 100%);
-webkit-box-shadow: 0px 9px 0px 0px darkgreen,
0px 9px 30px 0px black;
-moz-box-shadow: 0px 9px 0px 0px darkgreen,
0px 9px 30px 0px black;
box-shadow: 0px 9px 0px 0px darkgreen,
0px 9px 30px 0px black;
}It is important to use “to bottom” instead of “top”, cause without it code won’t work with IE 11 (and probably in older version too).
Little bit of explanation:
- First shadow, 0px 9px 0px 0px darkgreen, is responsible for “ground”, cause if only second value is not zero, it fills value specified in Y direction with 9 pixels in my case
- Second shadow, 0px 9px 30px 0px black, is responsible for what people naturally understand by shadow. It blurs in 30 pixels, but blur has to start 9 pixels down in Y direction, to avoid collision with “ground”.
And with :hover and :active CSS pseudoselectors I play with these values, and also I change color from black to, for case of button-success, to darkgreen, which is the “ground” color. On :hover “ground” and “shadow” are smaller, and for :active they are the smallest. I think it looks nice: more “active” buttons are (I chose, quite reasonably I think, that :hover is more “active” that without any state and that :active is most active state cause user decides to push it :) ), their shadows become more diminished. It doesn’t require any specialized knowledge, just basic CSS which any Front-End (or Full-Stack, which recently is a very neat tearm) developer should has, and I think it looks nice :)
Final result you can find here: 3D Buttons — beginnings. My advice is to HTML and JS tabs by clicking it, which makes reading CSS easier.
Conclusion
It works with IE 11, Edge, Chrome, Opera and Firefox. I have no ability to test it in Safari on Apple computer, but I am not predicting any major problems. But even if it will happen — who cares :) It gave so much fun, so I strongly encourage you to play with CSS, especially that with CSSDesk or Codepen (or any similar thing, like JSFiddle) you don’t need any IDE and you can show it to the world with ease.
