[CSS] Creating a CSS Button - Printable Version

[CSS] Creating a CSS Button - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Coding (https://sinister.li/Forum-Coding)
+--- Forum: Coding (https://sinister.li/Forum-Coding--71)
+--- Thread: [CSS] Creating a CSS Button (/Thread-CSS-Creating-a-CSS-Button)

[CSS] Creating a CSS Button - Cyan - 12-23-2013

First Your Going to need a button to a link to style in this tutorial we will be using a Button an input button to be exact

You Need to set up your button like so

Code:
<input class="button" type="button" value="CSS Button" />

After that you will need to style the button using css, with that said you will be adding a class of button and the actual style like the coding below

Code:
.button {
    border:1px solid #CCCCCC; /*Sets the border */
    border-radius:2px; /*Sets the Roundness of the border */
    -webkit-box-shadow:0 0 3px #000; /* Adds an outer shadow to the button */
    background: #ffffff;
   
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#e8e8e8', GradientType=0);
    /* IE6-9 */
}

Then to add a stylish button animation you will need to use the hover effect quite resourcefully

Code:
.button:hover{
       border:1px solid #CCCCCC;
    border-radius:2px;
    -webkit-transition:all 0.4s ease-in-out;
    transition:all 0.4s ease-in-out;
    -webkit-box-shadow: 0 0 3px #000;
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e5e5e5 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e5e5e5 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e5e5e5 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e5e5e5 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

Source & Credit: Burned Designs

RE: [CSS] Creating a CSS Button - Fallen - 12-23-2013

Thanks for sharing this and linking it to the source.

RE: [CSS] Creating a CSS Button - Cyan - 12-23-2013

(12-23-2013, 10:33 PM)Fallen Wrote: Thanks for sharing this and linking it to the source.

Anytime!

The source is my internet bestfriend! Biggrin

RE: [CSS] Creating a CSS Button - Town - 12-23-2013

very nice thread, you add a preview of the button

RE: [CSS] Creating a CSS Button - Fallen - 12-23-2013

(12-23-2013, 11:20 PM)Town Wrote: very nice thread, you add a preview of the button

Yes, I agree. There should be some sort of way to tell what it comes out.

RE: [CSS] Creating a CSS Button - Cyan - 12-23-2013

(12-23-2013, 11:21 PM)Fallen Wrote: Yes, I agree. There should be some sort of way to tell what it comes out.

Let me see if I can get a preview Biggrin

RE: [CSS] Creating a CSS Button - Fallen - 12-23-2013

Thanks man. Just if you create it, you'll be able to get us one. Smile

RE: [CSS] Creating a CSS Button - Cyan - 12-23-2013

(12-23-2013, 11:36 PM)Fallen Wrote: Thanks man. Just if you create it, you'll be able to get us one.

I have no clue where to create one :O

RE: [CSS] Creating a CSS Button - Aces - 12-23-2013

Meh, I just generate a CSS button on http://www.cssbuttongenerator.com/ much faster.