7.3 – D.S. 6 – Making the Item Buttons

Development Step SIX

Making the item buttons

Since I changed the genre button in the last development step and read already into CSS, I can now immediately dive straight into setting up images for buttons. For that first of all I need some images. Three to be precise. One gun, one banana and one dildo icon. I made those in photoshop and just drew them by hand:

Now, that I have the icons I have to implement them into my Item-buttons. To do that I googled “how to use icons for buttons CSS” and found this forum link. I looked at the code and tried it with my icons, the problem I encounter though was, that the icon did not scale, which means that when my button is for example 100×100 px you can only see the top left 100×100 px big corner of my icon. And again I asked google, and found this answer “Most modern browsers have support for CSS background-image options like background-size, so you may really use something like this:” on stack overflow.

So if I add background-size 100% to the other attributes, the outcome looks like this:

And this is my code for each Icon:

.buttonIB{
background: url(data/BananaIcon.png) no-repeat;
background-size: 100%;
cursor: pointer;
border: none;
width: 100px;
height: 100px;
}

Now I removed the play button since I will add it in later again and make it better looking, I moved the three item buttons below the video and added a little hover animation which just increases the size from the selected button by 20 px with these lines of code:

.buttonIB{
[...]
transition: all .2s;
}

.buttonIB:hover {
width: 120px;
height: 120px;
}

The goal now is to position the three buttons in a triangle shape around the genre button, that means that I have one left, one right and one below. Since I don’t have a real idea on how to solve it I googled myself around and stumbled across the following links: stack overflow, w3schools 1, w3schools 2 and w3.org, and what I learned out of those are the following things:

position: absolute;

Which is kinda tricky to be honest, because even tho it fixes the problem that the button jumped up when the video reloaded since it now is “fixed” to a certain position, it now feels more difficult to position correctly so I am still looking for a solution to position it perfectly.

top or bottom or right or left: x%;

This positions the button at 50% of the screen, the problem is that it takes the first (or last) pixel of the button and not the middle which results in the button being offset by 50 pixels (half of the button). The interesting thing is, that if I position the button at 50%, 50% top and right, and then use the following code (transform) I can transform it by 50% top and bottom to the left so it now is positioned from the middle point of the button rather from the top left most pixel, which can center it perfectly.

transform: translate( x%, x%);

With transform: translate the given object should be translated (moved) to for example the middle of the screen when 50%, 50% would be used. The problem I encountered here was that it did indeed positioned my Item buttons correctly but somehow had no effect on my Genre Button.

So what I did to fix this problem, I just tried out everything I could, and to show you my “workflow” I made a time-laps which shows the time I took in 20 seconds. You can see how I am just trying out by removing lines of code and checking what might be causing the problem. After a while I found out that the wiggle effect stops the object from being transformed since you can only transform an object once. My solution to this was just simply removing the wiggle from the button because it didn’t really fit in and was very small anyways. I also encountered the same problem when I looked for how to rotate the buttons and just figured out by myself that I can call several different commands in one transform (e.g. transform: translate(-50%, -50%) rotate(75deg);).

In the end of the time laps you can also see me trying to remove the annoying blue selection which appears when I click a button. I googled for “how to remove the blue selection css” and found a link to stack overflow. Here they described

input:focus {
outline: none;
}

which should fix that selection box, but somehow it did not work for me. I also tried “box-shadow: none” with no success, so I just left it like it was for now.

And this is the product of this weeks development step:

EDIT: Ha! jokes on me. Few minutes after I posted this video, I checked one more time on how to remove the annoying blue selection box and found here, that I could just add “outline: none;” to the buttons and the blue selection box is history! So, well, another problem solved.

Retrospective:

This Development Step was rather made out of several small steps than one big step since I had a lot of different and small problems that always jumped in between me and my goal. But I am not saying that this was a bad thing. Actually I really liked it, because even tho it might have taken me longer since I always have to stop the progress and learn something new, but also the many small mistakes made me learn way more in total. So in a conclusion, I am very happy of this weeks “Development Step” and am looking forward for the next one which will, probably contrast this one since there will be one big problem to focus on (the video scaling).