DEV Community

Randi Schreiner
Randi Schreiner

Posted on

Buttons, Buttons and more Buttons

So this week was project week for phase 2 of my time at Flatiron school. I was a little flustered coming into the week - more because of technical difficulties than anything - but once I got started on this project, I really enjoyed it.

This project was essentially about using Sinatra and the basic CRUD actions. Setting up the initial base of this project was super easy and I need to give some serious props to the Corneal gem and its creator. This gem is a serious time-saver and this guy is a genius.

During the creation of my project, I learned so much about everything from Flexbox Link to color schemes Link, but the one thing I really found myself spending WAY too much time on were the buttons! Now, I know this is just a styling thing and possibly not critical in the grand scheme of things but I will say I learned a TON while trying to make these darn buttons work (thanks Google!).

Just some quick advice to anyone on a similar journey with buttons, don't go it alone. There are tons of websites out there to help you create a button Link. Once you get the general idea, copy the code they give you. It will look something like this:
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}

Once you get this into your program, you can mess around with the background-color to change the color of your button, color to change the text color, padding to change size relative to the text - just play around until you love it!

During one of my arguements with buttons, I found myself in a loop with Google continually telling me I needed Javascript to do what I wanted. The problem with this - I don't know Javascript! But, try as I might, I couldn't find a satisfactory alternative. So, Javascript it was. Needless to say, I know 2 lines of Javascript now, just enough to get through exactly what I wanted. But sometimes that's enough for now. And everything worked out in the end.

Check it out if you would like and give me ideas on how to make it better!
Link

Top comments (0)