Html CSS base button design for Niche website

Button style one:

HTML Code:

 <a class="button-style-one" href="#" target="_blank" rel="nofollow noopener"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Check Price on Amazon!</a>
 

CSS code:

.button-style-one{ color: #FFFFFF; background-color: #f37022; border-color: #c35a1c; -webkit-border-radius: 5px; color: #FFFFFF; padding: 9px 20px; font-size: 20px; line-height: 32px; border-color: #f79b65; -webkit-border-radius: 5px; text-shadow: none; } .button-style-one:hover { color: #fff; background-color: #f79b65; } @media only screen and (max-width: 560px){ .button-style-one { font-size: 16px !important; padding: 12px 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .button-style-one i { display: inline-block; width: .5em; height: .5em; margin: 0 .5em 0 0!important; text-align: center; line-height: 1em; }

Leave a Comment

Your email address will not be published. Required fields are marked *