Question regarding HTML and CSS


I would like your help on how to make a button like on this website:

"Sign Up" button please.

The first one to answer will get the points :)
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
I just stole the CSS from the site. All kudos to them.
.button {
    background-color: rgb(245, 117, 108);
    background-attachment: scroll, scroll;
    background-clip: border-box, border-box;
    background-image: linear-gradient(rgb(247, 118, 108), rgb(246, 99, 89)), none;
    background-origin: padding-box, padding-box;
    background-size: auto, auto;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.298039) 0px 1px 2px 0px;
    color: rgb(255, 255, 255);
    cursor: auto;
    display: inline-block;
    font-family: AzoSans, Avenir, 'Helvetica Neue', helvetica, sans-serif;
    font-size: 30px;
    height: 30px;
    line-height: 30px;
    padding-bottom: 27px;
    padding-left: 58px;
    padding-right: 58px;
    padding-top: 29px;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 0px;
    transition-duration: 0.4s;
    transition-property: all;
    vertical-align: middle;

.button:hover {
    -moz-box-shadow: inset rgba(255,255,255,0.3) 0 1px 0,rgba(0,0,0,0.3) 0 1px 2px,#f5756c 0 1px 40px;
    -webkit-box-shadow: inset rgba(255,255,255,0.3) 0 1px 0,rgba(0,0,0,0.3) 0 1px 2px,#f5756c 0 1px 40px;
    box-shadow: inset rgba(255,255,255,0.3) 0 1px 0,rgba(0,0,0,0.3) 0 1px 2px,#f5756c 0 1px 40px

.button:active {
    -moz-transform: scale3d(0.95, 0.95, 0.95);
    -webkit-transform: scale3d(0.95, 0.95, 0.95);
    transform: scale3d(0.95, 0.95, 0.95)

<body style="background-color: navy;">
<a href="#" class="button">Sign Up</a>

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
adra750Author Commented:
thank you very much

how to remove the underline on the Sign Up text, check it.

How did you steal the CSS other than inspecting
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

adra750Author Commented:
Ok I fixed the under line with


How to put the button to center?
To remove the underline, add "text-decoration: none;" to the main CSS section ( .button { ... } )

Yes, I did use the inspector in Chrome browser. Copied all the styles from the "Computed" tab and them removed all the defaults in a text editor (It turned out I have removed too many).
adra750Author Commented:
so you mean something is missing?

what about to center the button?
To put the button in the center horizontally
add the  "text-align: center;" style to its parent node:
<nav style="text-align: center;">
    <a href="#" class="button">Sign Up</a>

Open in new window

Yes, that "text-decoration: none;" was missed.
adra750Author Commented:
adra750Author Commented:
sorry to ask alot,

the "Payments Made Simple" on website what font is that?
According to the site's CSS the font is called "AzoSans"

The following CSS tells the browser where to download the font:
@font-face {
    font-family: 'AzoSans';
    src: url(azo-sans-thin.eot);
    src: url(azo-sans-thin.eot?#iefix) format("embedded-opentype"),url(azo-sans-thin.woff) format("woff");
    font-weight: 100;
    font-style: normal

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.