Type of this button

alphabetlorefan2003

What is the type of this button? I feel like that type of button is used in another website, in an old layout, like how Scratch 2.0 have it. Here it is:

Za-Chary

…A red button?

alphabetlorefan2003

Za-Chary wrote:
…A red button?

It's just an example. What I mean is that how can you recreate that button style?

BigNate469

It's similar to the default in Chrome.

The “Follow Discussion” button, which I think is similar enough for your purposes, has the following CSS applied to it:

.button, button {
    line-height: 30px;
    border: 1px solid #eee;
    border-color: #855cd6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    overflow: visible;
    font-weight: normal;
    background-color: #855cd6;
    color: #fff;
    background-image: -webkit-linear-gradient(top,#855cd6,#855cd6);
    background-image: -moz-linear-gradient(top,#855cd6,#855cd6);
    background-image: -ms-linear-gradient(top,#855cd6,#855cd6);
    background-image: -o-linear-gradient(top,#855cd6,#855cd6);
    background-image: linear-gradient(top,#855cd6,#855cd6);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#855cd6,endColorStr=#855cd6);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-sizing: border-box;
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    cursor: pointer;
    margin: 3px;
    height: 32px;
    vertical-align: middle;
    text-shadow: none;
}

Last edited by BigNate469 (June 7, 2024 12:30:52)

alphabetlorefan2003

BigNate469 wrote:

It's similar to the default in Chrome.

The “Follow Discussion” button, which I think is similar enough for your purposes, has the following CSS applied to it:

.button, button {
    line-height: 30px;
    border: 1px solid #eee;
    border-color: #855cd6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    overflow: visible;
    font-weight: normal;
    background-color: #855cd6;
    color: #fff;
    background-image: -webkit-linear-gradient(top,#855cd6,#855cd6);
    background-image: -moz-linear-gradient(top,#855cd6,#855cd6);
    background-image: -ms-linear-gradient(top,#855cd6,#855cd6);
    background-image: -o-linear-gradient(top,#855cd6,#855cd6);
    background-image: linear-gradient(top,#855cd6,#855cd6);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#855cd6,endColorStr=#855cd6);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-sizing: border-box;
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    cursor: pointer;
    margin: 3px;
    height: 32px;
    vertical-align: middle;
    text-shadow: none;
}

Thanks!

alphabetlorefan2003

alphabetlorefan2003 wrote:

BigNate469 wrote:

It's similar to the default in Chrome.

The “Follow Discussion” button, which I think is similar enough for your purposes, has the following CSS applied to it:

.button, button {
    line-height: 30px;
    border: 1px solid #eee;
    border-color: #855cd6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    overflow: visible;
    font-weight: normal;
    background-color: #855cd6;
    color: #fff;
    background-image: -webkit-linear-gradient(top,#855cd6,#855cd6);
    background-image: -moz-linear-gradient(top,#855cd6,#855cd6);
    background-image: -ms-linear-gradient(top,#855cd6,#855cd6);
    background-image: -o-linear-gradient(top,#855cd6,#855cd6);
    background-image: linear-gradient(top,#855cd6,#855cd6);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#855cd6,endColorStr=#855cd6);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-sizing: border-box;
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    cursor: pointer;
    margin: 3px;
    height: 32px;
    vertical-align: middle;
    text-shadow: none;
}

Thanks!

Also, where can I test the CSS?

BigNate469

alphabetlorefan2003 wrote:
alphabetlorefan2003 wrote:
BigNate469 wrote:
snip
Thanks!
Also, where can I test the CSS?

Please, learn the art of snipping quoted posts.
Your browser.
You're going to need an HTML file with a button in it first, though.
So, you need a decent text editor (or even better, an IDE, but it's not necessary), and paste the following HTML inside it:

<!DOCTYPE html>
<html>
  <head>
    <style>
     insert the button's CSS here
    </style>
  </head>
  <body>
    <button class="button">Insert the text you want in the button here</button>
  </body>
</html>

Then, save that to your computer as a .html file (if it doesn't have an option to do that directly, then save it as a .txt file and change its file extension to .html, this works on most operating systems), and open it in your browser (usually just open the file like you would any other file).

Discuss Scratch