March 2, 201511 yr I have attempted unsucessfully to duplicate a class responsible for formatting links turning them into buttons. Below I pasted the html and css original codes: ORIGINAL CODE html code <footer id="footer" class="anything"> <ul> <li><a class="btn btn-default" href="#">whatever</a></li> .............. main .css . ............... ................ ................. /* .btn original */ .btn-primary { padding: 8px 20px; background: #f86410; color: #fff; border-radius: 4px; border:none; margin-top: 10px; } .btn-primary:hover, .btn-primary:focus{ background: #f86410; outline: none; box-shadow: none; } .btn-transparent { border: 3px solid #fff; background: transparent; color: #fff; } .btn-transparent:hover { /*border-color: rgba(255, 255, 255, 0.5);*/ border-color: rgba(0, 0, 0, 0.5); } /* /// .btn original */ Now I will paste my tentative code : CHANGED CODE html code <footer............ <ul> <li><a class="btn2 btn-default" href="#">whatever</a></li> /* .btn2 */ .btn2-primary { padding: 8px 20px; background: #f86410; color: #ffcc00; border-radius: 4px; border:none; margin-top: 10px; } .btn2-primary:hover, .btn2-primary:focus{ background: #f86410; outline: none; box-shadow: none; } .btn2-transparent { border: 3px solid #fff; background: transparent; color: #fff; } .btn2-transparent:hover { /*border-color: rgba(255, 255, 255, 0.5);*/ border-color: rgba(0, 0, 0, 0.5); } /* /// .btn original */ I thought it was going to work but it is not what happened (only a rectangular background ) Would you please provide me some guidance on what is wrong ; Thank you so much. Edited March 2, 201511 yr by ronwolpa
Create an account or sign in to comment