آموزش ساخت دکمه Button در CSS

آخرین مطالب

نرم افزار میکس فایل های موزیک Atomix Virtual DJ Pro 6.1.2 Build 301
DJ یک نرم افزار بسیار فوق العاده برای میکس کردن فایل های mp3 یا به اصطلاح DJ کردن آهنگ است. این نرم افزار مالتی مدیا توسط میلیون ها نفر دیجی و تعداد بسیار زیادی کلوب موسیقی در سراسر جهان استفاده می شود. استفاده از کامپیوتر در میکس کردن ۲ آهنگ برای یک دیجی با سرعت عمل بیشتری همراه است تا استفاده از دستگاه...

آموزش ساخت دکمه Button در CSS

جمعه ، 5 شهریور 1389 ، 13:30 | نوشته شده توسط Farzad |

در این آموزش شما می توانید نحوه ساخت دکمه های پویا در CSS را فرا بگیرید ، این آموزش به صورت زبان اصلی میباشد اما تصاویر و کدهای قرار داده شده کاملا گویا این آموزش میباشد ، همچنین در پیان اموزش فایل زیپ شده را دریافت نمائید .

Step 1
Create a rounded corner image in Photoshop, with a 30pt radius on both sides.

Step 2
Turn on the guide lines, so that you can select accurately. Crop the selection and save as image.

Step 3
Now select the right corner of the button. Crop the selection and save it as an another image.

Step 4
Repeat the above steps 1 to 3 for the rollover image.

Step 5
That's all for the images, now create the basic HTML unordered list.

<ul class="example1">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

Here are the CSS properties for 2 Images CSS round corners button.

/************************************************
 Round Corners Button Rollover Example 1
************************************************/
 
.example1 li {
     display:inline;
     list-style:none;
}
 
.example1 li a {
     background:transparent url(images/buttonleft.jpg) no-repeat left;
     display:block;
     float:left;
     height:22px;
     margin-right:15px;
     padding:5px 0 5px 10px;
}
 
.example1 li a span {
     background:transparent url(images/buttonright.jpg) no-repeat right;
     cursor:pointer;
     display:inline;
     float:left;
     height:12px;
     padding:5px 10px 5px 0;
}
 
.example1 li a:hover {
    background:transparent url(images/buttonleft_ro.jpg) no-repeat left;
    color:#fff;
    padding:5px 0 5px 10px;
}
 
.example1 li a:hover span {
    background:transparent url(images/buttonright_ro.jpg) no-repeat right;
    color:#fff;
    padding:5px 10px 5px 0;
}

2. CSS Sprite Round Corners Button

Using CSS Sprite is rather easy and cool compared to the above mentioned method. And the good thing about using CSS Sprite is, there will be no delay for loading the rollover image when you hover over the button. It basically load the whole image when you first visit the site, and switches around the background position when you hover over the button.

Step 1
What you have to do is to stack the normal button design above the rollover button design and save both the button and the rollover as one image.

And that's it, now create your HTML unordered list.

<ul class="example2">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

And here are the CSS properties for CSS Sprite round corners button.

/************************************************
 Round Corners Button Rollover Example 2
************************************************/
 
.example2 li {
    display:inline;
    list-style:none;
}
 
.example2 li a {
    background:transparent url(images/buttons.jpg) no-repeat top left;
    display:block;
    float:left;
    height:22px;
    margin-right:15px;
}
 
.example2 li a span {
    background:transparent url(images/buttons.jpg) no-repeat right top;
    display:inline;
    float:left;
    height:18px;
    padding:4px 10px 0 0;
    margin-left:10px;
    cursor:pointer;
}
 
.example2 li a:hover {
    background-position:0px bottom; color:#fff;
}
 
.example2 li a:hover span {
    background-position:right bottom;
}

3. FireFox CSS Round Corners Button

In your CSS, you can define Firefox 3 CSS properties in order to achieve round corners button, without the need of cropping or slicing any images. It's amazing to see round corners button appearing without the use of images, but this only apply to Firefox 3.

And in IE, Safari or any other browsers, you will only see a normal square button without round corners, because they do not render Firefox CSS properties.

First create your HTML unordered list.

<ul class="example3">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

Here are the CSS properties for Firefox round corners button.

/************************************************
 Round Corners Button Rollover Example 3
************************************************/
 
#container .example3 li {
    display:inline;
    list-style:none;
    margin-right:10px;
}
 
#container .example3 li a {
    background:#fff;
    border:1px solid #ccc;
    padding:3px 10px;
    -moz-border-radius:15px;
}
 
#container .example3 li a:hover {
    background:#5d9ddd;
    border:1px solid #2a7ecd;
    color:#fff;
    -moz-border-radius:15px;
}

4. Safari CSS Round Corners Button

There are also a different set of Safari CSS properties for Safari web browsers and it's only allow to be render in Safari 4, and if you view them in other browsers, you will see a normal square button.

Again create your HTML unordered list.

<ul class="example4">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

Here are the CSS properties for Safari CSS round corners button.

/************************************************
 Round Corners Button Rollover Example 4
************************************************/
 
#container .example4 li {
    display:inline;
    list-style:none;
    margin-right:10px;
}
 
#container .example4 li a {
    background:#fff;
    border: 1px solid #ccc;
    padding:3px 10px;
    -webkit-border-radius:10px;
}
 
#container .example4 li a:hover {
    background:#5d9ddd;
    border:1px solid #2a7ecd;
    color:#fff;
    -webkit-border-radius:10px;
}

5. Combined Firefox and Safari CSS Round Corners Button

If you think. it's fine that your IE visitors will not enjoy the beauty of the round corners button, then go ahead to combine the Firefox and Safari CSS properties. So only IE users will see this button as a square button, but for Firefox and Safari users they will see it as a nice round button.

Create the HTML unordered list.

<ul class="example5">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

Here are the CSS properties for Combined Firefox and Safari CSS round corners button.

/************************************************
 Round Corners Button Rollover Example 5
************************************************/
 
#container .example5 li {
    display:inline;
    list-style:none;
    margin-right:10px;
}
 
#container .example5 li a {
    background:#fff;
    border: 1px solid #ccc;
    padding:3px 10px;
    -webkit-border-radius:10px;
    -moz-border-radius:15px;
}
 
#container .example5 li a:hover {
    background:#5d9ddd;
    border:1px solid #2a7ecd;
    color:#fff;
    -webkit-border-radius:10px;
    -moz-border-radius:15px;
}

zip دریافت فایل آموزشی

اضافه‌ كردن نظر

JComments