Bummer! You have been redirected as the page you requested could not be found.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Text on Button

I created a button for the first time on a website I am creating for my business ( www.tomybsalon.com ) . I am trying to put a phone number on the button, and for some reason I cannot do it. I would appreciate any help and suggestions. this is the code:

<div class="booknow" style="width: 231px; height: 32px; background: url('http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/booknow.jpg') no-repeat;"><a href="http://tomybsalon.com/contact-tomy-b-long-island-hair-salon/">
</a>
<h3 style="text-transform: uppercase; color: white !important; margin-top: -1px; margin-left: 18px; font-size: 17px !important;"</h3>

8 Answers

I'd suggest a different approach.

Not using:

  • so many images
  • inline styles
  • !important
  • so much markup (sometimes you don't need a <div>)

Instead try something more like this:

<a href="#">Call us at 516-621-4100</a>
a {
  background: #DC1C54;
  color: white;
  text-decoration: none;

  text-transform: uppercase;
  text-align: center;
  padding: 10px 50px;
  border-radius: 20px;
}

That code will give you:

Imgur

Here's a working demo you can play with: http://codepen.io/jamesbarnett/pen/ftIib

Thank you so much. I am going to try it. I will post my results. so glad I am part of this community.

Hey James thank you for your help. after reading your comments, i realized that i have been working too hard, i guess because I am so unexperienced, I am going to paste my homepage code, I would appreciate if you could advise me on how to recode it to get the sam look but cleaner. My site loads slowly and know this an issue. I forgot to mention i am using wordpress as my content management , any suggestions about that? ...

<style><!--

slides, #slides2, #slides3, #slides4, #slides5, #slides6, #slides7, #slides8 { height: 529px !important; }

--></style> <div style="position: relative; width: 420px; height: 200px; float: left; z-index: 999; padding-top: 20px;"> <h1 style="font-family: helvetica, arial, sans-serif !important; font-size: 14px !important;">Tomy B. Hair Salon   |   Old Westbury, Long Island</h1> <p style="width: 420px; text-transform: uppercase; font-size: 70px !important; line-height: 70px !important; color: #2d2d2d !important; margin: 0 0 15px 0; font-family: 'futura_stdmedium' !important;">"I was born to style hair."</p>

<h3 style="text-transform: uppercase;">- Tomy Biton, Founder & Stylist</h3> <p style="width: 420px;">My salon is very unique. I am the only stylist. And there are never more than 2 or 3 clients here at a time. But that's on purpose. I want you to feel cared for. Hair is my life's passion.</p>

<div class="booknow" style="width: 231px; height: 32px; background: url('http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/booknow.jpg') no-repeat;"><a href="http://tomybsalon.com/contact-tomy-b-long-island-hair-salon/"> </a> <h3 style="text-transform: uppercase; color: white !important; margin-top: -1px; margin-left: 18px; font-size: 17px !important;"</h3> </div> </div>

<div class="container1" style="z-index: 1; padding-bottom: 529px; margin-top: -55px; margin-right: -30px;"> <div id="slides"> <p style="width: 520px; height: 529px;"><img alt="Long Island Hair Stylist" src="http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/slide1.jpg" /></p> <img alt="Long Island Hair Salon" src="http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/slide2.jpg" />

<img alt="Long Island Hair Salon" src="http://unexpectedways.net/tomyb/wordpress/wp-content/themes/Avada/images/slide3.jpg" />

</div> </div> <div style="border-top: 1px solid #d4d4d4;">[content_boxes] [content_box title="SERVICES" link="http://tomybsalon.com/services-of-tomy-b-hair-salon-long-island/" linktext="Learn More"]Hair styling isn't a hobby here. It's our life. Get treated by a true artist.[/content_box][content_box title="REVIEWS" link="http://tomybsalon.com/reviews-tomy-b-long-island-hair-salon-2/" linktext="Learn More"]See what others are saying about Tomy B.'s salon & services.[/content_box][content_box title="OUR STORY" link="http://tomybsalon.com/about-tomy-b-hair-salon-of-long-island/" linktext="Learn More"]Learn about the eccentric Israeli hair stylist who broke all the rules.[/content_box]

[content_box last="yes" title="SCHEDULE NOW"  link="http://tomybsalon.com/contact-tomy-b-long-island-hair-salon/" linktext="Learn More"]Click to schedule the most incredible hair experience of your life.[/content_box][/content_boxes]

</div> <div style="border-top: 1px solid #d4d4d4; margin-top: -20px;"><img class="alignnone size-full wp-image-95" alt="hair" src="http://unexpectedways.net/tomyb/wordpress/wp-content/uploads/2013/06/hair.jpg" width="1001" height="529" /></div> <div style="border-top: 1px solid #d4d4d4; margin-top: -20px; padding-top: 50px; margin-bottom: -10px;"> <div style="width: 800px; margin: 0 auto; padding-top: 30px;"> <p style="font-size: 12px !important;">ADDITIONAL INFO ON TOMY B. HAIR SALON IN LONG ISLAND, NY</p> <p style="font-size: 12px !important;">Tomy B. is a high-end <a href="http://tomybsalon.com/about-hair-stylist-tomy-biton/">hair stylist</a>, <a href="http://tomybsalon.com/services/cut/">haircuts</a> & <a href="http://tomybsalon.com/services/color-highlights-long-island/">coloring expert</a> located in Old Westbury, Long Island. However, men and women travel from all parts of New York for his world-renowned treatments. This includes celebrities, Long Island professionals, moms & dads, as well as New York City residents from all boros.</p> <p style="font-size: 12px !important;">WHAT AREAS DO YOU SERVE?</p> <p style="font-size: 12px !important;">While our hair salon clients come from every corner of Long Island and New York City, the most popular areas that we serve are Albertson, Bethpage, Carle Place, East Norwich, Garden City, Glen Head, Greenvale, Jericho, Manhasset, Mineola, Old Westbury, Plainview, Port Washington, Roslyn, Roslyn Heights, Sea Cliff, Syosset, Williston Park, 11040 (postal code), 11042 (postal code), 11542 (postal code), 11560 (postal code), 11568 (postal code), 11771 (postal code), Brookville, East Garden City, East Hills, North New Hyde Park, and Searingtown, NY with our haircuts, hair coloring, highlights (full and partial), straightening, glazing, conditioning, collagen-infused treatments, and hand-crafted extensions</p> <p style="font-size: 12px !important;">HOW CAN I BOOK AN APPOINTMENT?</p> <p style="font-size: 12px !important;">Simply give us a call at (516) 621-4100. We'd love to hear from you!</p> <p style="font-size: 12px !important;">WHERE ELSE CAN I LEARN ABOUT HAIR STYLIST TOMY BITON AND HIS HAIR SALON?</p> <p style="font-size: 12px !important;">Connect with us and learn more!</p> <p style="font-size: 12px !important;"><a href="https://www.facebook.com/TomyB.Salon">Tomy B. on Facebook</a> | <a href="https://twitter.com/Tomy_BSalon">Tomy B. on Twitter</a> | <a href="https://plus.google.com/+Tomybsalon/about">Tomy B. on Google+</a> | <a href="http://national.citysearch.com/profile/44413613/old_westbury_ny/tomy_b_hair_salon.html">Tomy B. on City Search</a> | <a href="http://www.merchantcircle.com/business/Tomy.B.Hair.Salon.OLD.WESTBURY.NY.516-621-4100">Tomy B. on Merchants Circle | </a><a href="http://tomyb.tumblr.com">Tomy B. on Tumblr</a></p>

</div> </div>

Create a codepen instead of posting your code here

Thank you, I will try it for the first time, you just taught me one more thing

i copied and pasted the code to codepen, how do i post that here the way your did? did you use a screenshot or upload a file?

You should post a link to the codepen

I hope thats right http://cdpn.io/xpKeq

i am starting to get whats is going wrong. The css and the html are combined on one page not sure how to separate them any suggestions beside doing it manually, its a lot of code.

Nope, there's no easy way to refactor code

thanks so much for all of your help.Do you think you can maybe guide me on how to go about creating the same home page layout with simplified code.Believe it or not but i learned so much from just communicating with you this is the look i am trying to achieve www.tomybsalon.com