Drawing Fieldtrip Logo Dots
by: Fieldtrip

CSS: Animated Form Buttons

A CSS tutorial.

Besides being nice to look at, animated form buttons serve as an excellent landing pad for a click, especially on mobile devices.

Want create site? Find Free WordPress Themes and plugins.

stradegy-stylish-form-buttons

One of my favorite trends in front-end web design is the use of subtle, but beautifully designed buttons. Besides being nice to look at, they serve as an excellent landing pad for a click, especially on mobile devices. Our button will be pure CSS, no images, Javascript or jQuery needed here. So let’s get to it.

 

Create Your HTML Button

First step is to include the submit button in your HTML document.

[html]
<input type=”submit” class=”signup” value=”Confirm” />
[/html]

You should see something like the button above. Let’s break down the line above.

input declares it’s a piece for your form.
type – declaring the type is submit we establish that this is a submission button.
class use the selector you plan to use in your stylesheet, in this case we’re using signup.
value let’s you choose what you want your button to say; I’m using Confirm.

Add Some CSS Styling

I’m going to create a nice big button with a subtle gradient, rounded corners and make it pop off the page with a little 3D effect.

[css]
.submit {
background: #cdeb8e; /* Browsers that do not support gradients */
background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* Firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome, Safari 4.0+ */
background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* ie 10.0+ */
background: linear-gradient(to bottom, #cdeb8e 0%,#a5c956 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#cdeb8e’, endColorstr=’#a5c956′,GradientType=0 ); /* ie 6.0-9.0 */

box-shadow: 0 6px #70A016;

color:#fff;
font-size:1.5em;

padding:0.4em 2em;
position: relative;
border:0;
outline:none;
-webkit-border-radius: 3px; /* ie 9.0+ */
-moz-border-radius: 3px; /* Firefox 2.0+ */
border-radius: 3px;
}
[/css]

stylish-form-button

Now to go through this bit of CSS.

background is what I hope you think it is; it styles our background. However, I wanted to include a green gradient and as you can see I added 7 background and one filter identifiers. Why? Because not all browsers accept the same keywords (i.e. Chrome uses linear-gradient, Firefox uses -moz-linear-gradient, etc). Check out Chris Coyier’s post over at CSS-Tricks for more information on gradients.
box-shadow creates the “3D” effect (I hate saying 3D… but it is what it is). The 6px specifically provides us the depth below the button. Then select your color at the end of the keyword; it’s best to use a color darker that your bottom gradient color to create a shadow-like effect.
color selects the color for the button text.
font-size establishes font size for the button text.
padding creates the size of our button. The values create padding around the button text.
position: relative is important for our next steps.
border creates a border, I chose to not include a border although you could add a 1px border in a color a close to your shadow and gradient.
outline: none is optional. It removes the glow that occurs on Macs & PCs around the button post-click.
border-radius produces rounded corners. This is another very optional identifier. Personally, I prefer it.

Add the :hover Psuedo-Class and Animate Our Button

The hardest part of this tutorial is now behind us and the finish line is in sight. This step is optional, but I like the effect. We’ll be adding the :hover psuedo-class to create a slight bump down when you hover over the button. Let’s dive in.

[css]
.submit:hover {
top:1px;
box-shadow: 0 5px #70A016;
}
[/css]

hover-stylish-form-button

Not too bad right? Now for the breakdown.

top:1px is the distance the button will bump down when hovered. Remember the position:relative from the previous step? Position activates the top identifier, otherwise it wouldn’t budge.
box-shadow: 0 5px #70A016 continues our 3D effect. The key here is that in the previous step the “shadow” is 6px deep. Here, we update that value to 5px as we are bumping the button down 1px. This will create the illusion that the button is being pressed into the page, without moving the whole button, shadow included. Want to bump your button down a little further? Let’s say you wanted it to slide down 2px, you would then change your box-shadow’s bottom value to 4px; we calculate the difference between the original 6px and the 2px it’s sliding down.

Add the :active Psuedo-Class and Finish Our Button Animation

We’ve reached the final step in our tutorial. This step will fully push our button into the page on the click or active state. It’s not too much different than the previous step, we’re just updating values to complete our effect.

[css]
.submit:hover {
top:6px;
box-shadow: 0 0px;
}
[/css]

clicked-stylish-form-button

top:6px declares that the button bump down all 6px, the depth of our original shadow.

box-shadow: 0 0px removes the shadow completely giving us the effect that the button has been completely pressed down into the page.

Form Button Style & Animation Wrap Up, Code Sample & Demo

That’s how to create your fancy, pure CSS button. There’s tons of ways to customize this button, the best way to find out what works best for you and your project is to play around with different configurations.

Again the main key is on the hover and click with make sure you’re getting the difference between the original shadow depth and the distance the button is bumped down, and entering that value for your box-shadow identifier.

» View the Code & Demo in Action «

Did you find apk for android? You can find new Free Android Games and apps.