CSS Button Creation- The Challenge

Challenge accepted!
Ashley, our dearest Flatiron instructor, threw to the class a coding challenge. We were divided in two teams and were given the task to recreate this button only using css.

After a quick attempt, this is what I had:First Attempt Button
This is the link to the code.
Hmmm….not quite the same. Also the css code smells as there are some repetition.

Then I shared my code with the group, Jon’s code resemble the button more and I learned a ton from looking at his.

In the end, this is how the team’s button looked like:FInal button code and this is how the code looks.

The cool thing that code such as


a:before {
  content: "\2605";
  color:#848486;
}


a:after {
  content: "\2605";
  color:#848486;
}

was refactored as:


a:before, a:after {
  content: "\2605";
  font-size: .75em;
  color: #777;
}

Plus, I learned that hex colors such as #DDDDDD can be abbreviated as #DDD.

The team I was in did not end up winning as we took longer to finish the challenge. But for me learning is winning and in this aspect I believe it was a beautiful win for all students involved.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s