• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 214
  • Last Modified:

Question regarding HTML and CSS

hello,

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

https://plasso.co/

"Sign Up" button please.

The first one to answer will get the points :)
0
adra750
Asked:
adra750
  • 5
  • 5
1 Solution
 
Tom BeckCommented:
0
 
zc2Commented:
I just stole the CSS from the site. All kudos to them.
<html>
<style>
.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)
}

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

Open in new window

0
 
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
adra750Author Commented:
Ok I fixed the under line with

style="text-decoration:none;"

How to put the button to center?
0
 
zc2Commented:
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).
0
 
adra750Author Commented:
so you mean something is missing?

what about to center the button?
0
 
zc2Commented:
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>
</nav>

Open in new window

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

the "Payments Made Simple" on website what font is that?
0
 
zc2Commented:
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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now