SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials How to Make 3D Press Buttons Using CSS3 Tutorial

How to Make 3D Press Buttons Using CSS3 Tutorial

tutoriallounge Tutorials Sep 07, 2012

We are living in advance age, and day by day we getting a lot of facilities in our daily routine life, professional developers provide online services to peoples, you can get very useful help of any problem online, and if you are web designer or developer, you can get a help of tutorials, you can use css3 tutorial to create different objects in web design and development, you can make web buttons by using css3, css3 is used for web pages to control the styles and layouts, you can create a complete object by using css3 coding, you can create an button using css3, you can provide shadow, beautiful style, border, attractive text effect, and other attractive or useful effects to your design in css3.

Today's I like to share with you a creative techniques of Creating 3D Press Buttons with CSS3 Tutorial, you can easily create css3 press button by using this css3 tutorial, the press buttons that we will create it will minimal smooth and are of soft colors, we will also get little help of html to creating 3d press button, html is also coding language that is extremely useful for creating website. So, let's start creating css3 press button tutorial.

HTML Step:

In the first step I have created 3D press button with different colors, we will provide 3D press buttons HTML codes, the HTML code will simple and will work and complete by CSS3 codes, I have created 3D press button with different colors.

demo tutorial

The CSS3 Code Start:

<div class="box">

<a href="/img_articles/21977/#" class="yellow_button">
Press Here
</a>

<a href="/img_articles/21977/#" class="red_button">
Press Here
</a>

<a href="/img_articles/21977/#" class="blue_button">
Press Here
</a>

<a href="/img_articles/21977/#" class="gray_button">
Press Here
</a>

</div>

The CSS3 Code End.

CSS3 Step:

In 2nd step, we will create css3 for press button, to create css3 first we have to make anchor tag that look like a button, we have created bordered box that is advance fresh design, copy the following box properties and create press button.

The CSS3 Code Start:

.box {
width:815px;
float:left;
height:100px;
background:#ececec;
border: 1px solid #d1d1d1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

The CSS3 Code End.

After creating buttons we will able to provide active event for the buttons, copy the following css3 to create the button look.

The CSS3 Code Start:

Red Button CSS3 Code

.red_button{
position:relative;
width:115px;
float:right;
margin:13px;
color:#FFF;
display:block;
text-decoration:none;
border-radius:5px;
border:solid 1px #ec3838;
background:#cb2727;
text-align:center;
padding:20px 30px;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s;
-webkit-box-shadow: 0px 9px 0px #a81515;
-moz-box-shadow: 0px 9px 0px #a81515;
box-shadow: 0px 9px 0px #a81515;
font-size:20px; }

Active Button Property

.red_button:active{
-webkit-box-shadow: 0px 2px 0px #a81515;
-moz-box-shadow: 0px 2px 0px #a81515;
box-shadow: 0px 2px 0px #a81515;
position:relative; top:7px;
}

As follow accordingly you should keep all code except colors, we also sharing color CSS code to get exact result as follow Final image of this "How to Make 3D Press Buttons Using CSS3 Tutorial" if you need in rest colors then follow color codes as and other codes are same:

Blue Button CSS3 Code

.blue_button{
color:#FFF;
border:solid 1px #41b7ee;
background:#3ba7d9;
transition: all 0.1s;
-webkit-box-shadow: 0px 9px 0px #1884b6;
-moz-box-shadow: 0px 9px 0px #1884b6;
box-shadow: 0px 9px 0px #1884b6;
}

Gray Button CSS3 Code

.gray_button{
color:#FFF;
border:solid 1px #ddd;
background:#a3a3a3;
transition: all 0.1s;
-webkit-box-shadow: 0px 9px 0px #494949;
-moz-box-shadow: 0px 9px 0px #494949;
box-shadow: 0px 9px 0px #494949;
}

Yellow Button CSS3 Code

.yellow_button{
color:#FFF;
border:solid 1px #f1e342;
background:#dacd37;
transition: all 0.1s;
-webkit-box-shadow: 0px 9px 0px #b6a918;
-moz-box-shadow: 0px 9px 0px #b6a918;
box-shadow: 0px 9px 0px #b6a918;
}

The CSS3 Code End.

The 3D Press Buttons that we created look like:

The 3D Press Buttons

Now we provide press effects to our created buttons, use css3 active selector, on this selector we need to reduce the size of the Box Shadow on the buttons, copy the following css3 to create the active effect for the buttons.

The CSS3 Code Start:

Red Button Active CSS3 Code

.red_button:active{
-webkit-box-shadow: 0px 2px 0px #a81515;
-moz-box-shadow: 0px 2px 0px #a81515;
box-shadow: 0px 2px 0px #a81515;
position:relative; top:7px; }

Blue Button Active CSS3 Code

.blue_button:active{
-webkit-box-shadow: 0px 2px 0px #1884b6;
-moz-box-shadow: 0px 2px 0px #1884b6;
box-shadow: 0px 2px 0px #1884b6;
position:relative; top:7px; }

Gray Button Active CSS3 Code

.gray_button:active{
-webkit-box-shadow: 0px 2px 0px #494949;
-moz-box-shadow: 0px 2px 0px #494949;
box-shadow: 0px 2px 0px #494949;
position:relative; top:7px; }

Yellow Button Active CSS3 Code

.yellow_button:active{
-webkit-box-shadow: 0px 2px 0px #b6a918;
-moz-box-shadow: 0px 2px 0px #b6a918;
box-shadow: 0px 2px 0px #b6a918;
position:relative; top:7px; }

The CSS3 Code End.

Then we pressed button look like:

pressed button look like

While creating 3d press buttons be careful about the code that button and the active selector the both has a position:relative and on the active effect and on the active effect we move this up by 7 pixels, if you change the press button to move up 7 pixels it creates the button appear that it is being pressed down and not that just the box-shadow is being reduced.

To view the active effects of buttons that we created check demo.

Download Source File   demo tutorial

   
subscribe to newsletter