I was in a meeting at work the other day where we were discussing our interview process for front-end developers. We were taking a step back and trying to decide what exactly we were going to look for in our interview process and if we were finding those skills in the developers we were interviewing. During the process the thought of interviewing for CSS was brought up and we started looking into some possible interview questions and stumbled across this website.
The first one is a simple question, but was really interesting. People in the room seemed to think it was way too hard and I wasn't 100% sure how I would do it without internet access. Here is the question: Using CSS properties alone, recreate this button:
So I decided to take this as a personal challenge and ended up coming pretty close to it by just eyeballing the colors, spacings, etc. It also took me way less time than I thought it would have and I learned a few things in the process. Here is the end result:
Breaking it down, I started with the easies things first to get me going. So I tackled the actual text of the button as my first thing. To get the text to appear correctly, I knew the font-family needed to be a Sans-Serif, the font weight to be a bit on the bold size, to update the text color to a dark grey instead of black, and finally to just make sure whatever text in the button is uppercase. Here is the css to do those things:
The next thing I decided to tackle was the stars. The solution to this is to use a font-family, svg, or something else with before and after selectors. If you haven't used them before check out the article about using after and before selectors. I decided to use font-awesome in my solution because it had a star icon and I could just reference the CDN in my jsfiddle. If you haven't used font icons before I wrote about it previously here. I messed with the colors a bit and ended up with some pretty simple before and after selectors.
So now that the content is correct, the next thing was to take a stab at the background and the the first border. So I added some padding to get the spacing of the button correct, and then went to work on the background. I knew you could have gradients in css, but I hadn't used them in a while so I didn't quite remember the syntax. I found some examples online like this and then created a gradient to the bottom with my 2 shades of gray. Finally I added a simple boarder and some border radius and we are starting to look pretty good now.
The last thing that was needed also the thing I was least certain about. I was sure it could be done, cause otherwise why would the ask the question? So I looked into box-shadow to see how that could be used and found something amazing. It can be used N number of times! So I finally had my solution. I just needed a few different levels of box-shadow. I needed one really dark layer around the border, followed by the larger light gray area. Next I added a white gap followed by the final border. Here is the final css for the .button class.
Cheers!
So I decided to take this as a personal challenge and ended up coming pretty close to it by just eyeballing the colors, spacings, etc. It also took me way less time than I thought it would have and I learned a few things in the process. Here is the end result:
Breaking it down, I started with the easies things first to get me going. So I tackled the actual text of the button as my first thing. To get the text to appear correctly, I knew the font-family needed to be a Sans-Serif, the font weight to be a bit on the bold size, to update the text color to a dark grey instead of black, and finally to just make sure whatever text in the button is uppercase. Here is the css to do those things:
.button {
text-transform:uppercase;
color:#444444;
font-family:sans-serif;
font-weight:bold;
font-size: 14px;
}
The next thing I decided to tackle was the stars. The solution to this is to use a font-family, svg, or something else with before and after selectors. If you haven't used them before check out the article about using after and before selectors. I decided to use font-awesome in my solution because it had a star icon and I could just reference the CDN in my jsfiddle. If you haven't used font icons before I wrote about it previously here. I messed with the colors a bit and ended up with some pretty simple before and after selectors.
.button::before{
font-family: FontAwesome;
color:#999999;
content: "\f005";
}
.button::after{
font-family: FontAwesome;
color:#999999;
content: "\f005";
}
So now that the content is correct, the next thing was to take a stab at the background and the the first border. So I added some padding to get the spacing of the button correct, and then went to work on the background. I knew you could have gradients in css, but I hadn't used them in a while so I didn't quite remember the syntax. I found some examples online like this and then created a gradient to the bottom with my 2 shades of gray. Finally I added a simple boarder and some border radius and we are starting to look pretty good now.
.button{
margin-left:10px;
text-transform:uppercase;
color:#444444;
font-family:sans-serif;
font-weight:bold;
font-size: 14px;
border-radius: 5px;
border:.5px solid #aaaaaa;
background: linear-gradient(180deg, #eeeeee, #aaaaaa);
padding: 10px;
}
The last thing that was needed also the thing I was least certain about. I was sure it could be done, cause otherwise why would the ask the question? So I looked into box-shadow to see how that could be used and found something amazing. It can be used N number of times! So I finally had my solution. I just needed a few different levels of box-shadow. I needed one really dark layer around the border, followed by the larger light gray area. Next I added a white gap followed by the final border. Here is the final css for the .button class.
.button{
margin-left:10px;
text-transform:uppercase;
color:#444444;
font-family:sans-serif;
font-weight:bold;
font-size: 14px;
border-radius: 5px;
border:.5px solid #aaaaaa;
background: linear-gradient(180deg, #eeeeee, #aaaaaa);
box-shadow: 0 0 1px 1px #666666,
0 0 0 6px #dddddd,
0 0 0 8px #ffffff,
0 0 0 10px #888888;
padding: 10px;
}
Cheers!
