Buttonmaker

featured image thumbnail for post Buttonmaker

Buttonmaker is used to design buttons if you were to not know css somehow.

Tools

Design

  • Vanilla Javascript
  • jscolor
  • CSS

Code

  • Figma

History:

After I made my first personal website I realized that I need something in it. I had not been the most consistent blogger so my idea was to make something that people could use that would link back to my site. I choose I button designer because why not.

Goals:

I wanted to be able to change all of the styles one would change to design a button and spit out the CSS so one could paste into thier code. I thought at the time that learned javascript styling would be a waste of time but it is easy and proved to be supoer useful when I moved to React.

Solutions:

For a long time this is the only page I got to rank well enough on Google to get regular traffic. At the time of writing this I am getting abround 400 impressions and 8 clicks a week. It makes me sad that I am taking it off of the domain it is on but when I made my original portfolio I just stacked all my projects in the same directory. Everything. In one directory. Not a proud moment.

Roadblocks:

Picking out colors I used the jscolor library to make it a little more user friendly then what I could do otherwise. When I added this project to github I decided to add font selection as a feature. I noticed that I used some strange naming conventions in my early development that I should have probably cleaned up. Instead I just named my new function something equally insane and jammed it in there.

View all Projects