This site uses cookies from Google to deliver its services, to personalize ads and to analyze traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Learn More
» » CSS Buttons
Senin, 19 Oktober 2015

CSS Buttons

CSS Buttonsoshlo.blogspot.com - CSS Buttons
 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS Buttons</title> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300' type='text/css'> <link href="styles.css" type="text/css" /> </head> <body> <div> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> <a href="#">Button</a> </div> </body> </html> 
 //style.css @charset "UTF-8"; /* CSS Document */ body{background:#ccc;} #container{ margin:100px auto; width:145px; padding:20px; background:#FFF; -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); } a{ text-decoration:none; padding:5px 20px; margin:0px 20px 20px 0px; display:block; width:100px; text-align:center; font-family: 'Yanone Kaffeesatz', sans-serif; text-transform:uppercase; font-size:18px; letter-spacing:1px; /* Rounded Corners */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /* Drop Shadow */ -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); } .button1{ color:#fff; border:1px solid #515151; /* Text Shadow */ text-shadow: 1px 1px 1px #515151; filter: dropshadow(color=#515151, offx=1, offy=1); /* Button Gradient */ background: rgb(125,126,125); /* Old browsers */ background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ } .button2{ color:#fff; border:1px solid #2d3e5c; background: rgb(96,108,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */ } .button3{ color:#fff; border:1px solid #5e8a00; text-shadow: 1px 1px 1px #5e8a00; filter: dropshadow(color=#5e8a00, offx=1, offy=1); background: rgb(191,210,85); /* Old browsers */ background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */ } .button4{ color:#fff; border:1px solid #e05702; text-shadow: 1px 1px 1px #e05702; filter: dropshadow(color=#e05702, offx=1, offy=1); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1); -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1); box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1); background: rgb(254,204,177); /* Old browsers */ background: -moz-linear-gradient(top, rgba(254,204,177,1) 0%, rgba(241,116,50,1) 50%, rgba(234,85,7,1) 51%, rgba(251,149,94,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,204,177,1)), color-stop(50%,rgba(241,116,50,1)), color-stop(51%,rgba(234,85,7,1)), color-stop(100%,rgba(251,149,94,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */ } .button5{ color:#fff; border:1px solid #009cc6; text-shadow: 1px 1px 1px #009cc6; filter: dropshadow(color=#009cc6, offx=1, offy=1); background: rgb(169,228,247); /* Old browsers */ background: -moz-linear-gradient(top, rgba(169,228,247,1) 0%, rgba(15,180,231,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,228,247,1)), color-stop(100%,rgba(15,180,231,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */ } .button6{ color:#fff; border:1px solid #6f818b; text-shadow: 1px 1px 1px #6f818b; filter: dropshadow(color=#6f818b, offx=1, offy=1); background: rgb(206,220,231); /* Old browsers */ background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */ } .button7{ color:#8b8b8b; border:1px solid #979797; text-shadow: 1px 1px 1px #fff; filter: dropshadow(color=#fff, offx=1, offy=1); background: rgb(238,238,238); /* Old browsers */ background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ } .button8{ color:#8b8b8b; border:1px solid #a0a0a0; text-shadow: 1px 1px 1px #fff; filter: dropshadow(color=#fff, offx=1, offy=1); background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } .button9{ color:#fff; border:1px solid #810808; text-shadow: 1px 1px 1px #810808; filter: dropshadow(color=#810808, offx=1, offy=1); background: rgb(247,13,13); /* Old browsers */ background: -moz-linear-gradient(top, rgba(247,13,13,1) 0%, rgba(150,11,11,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,13,13,1)), color-stop(100%,rgba(150,11,11,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(247,13,13,1) 0%,rgba(150,11,11,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f70d0d', endColorstr='#960b0b',GradientType=0 ); /* IE6-9 */ } .button10{ color:#fff; border:1px solid #111111; text-shadow: 1px 1px 1px #111111; filter: dropshadow(color=#111111, offx=1, offy=1); background: rgb(97,97,97); /* Old browsers */ background: -moz-linear-gradient(top, rgba(97,97,97,1) 0%, rgba(66,66,66,1) 48%, rgba(53,53,53,1) 51%, rgba(36,36,36,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(97,97,97,1)), color-stop(48%,rgba(66,66,66,1)), color-stop(51%,rgba(53,53,53,1)), color-stop(100%,rgba(36,36,36,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(97,97,97,1) 0%,rgba(66,66,66,1) 48%,rgba(53,53,53,1) 51%,rgba(36,36,36,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#242424',GradientType=0 ); /* IE6-9 */ } .button11{ color:#fff; border:1px solid #a5b10b; text-shadow: 1px 1px 1px #a5b10b; filter: dropshadow(color=#a5b10b, offx=1, offy=1); background: rgb(230,240,163); /* Old browsers */ background: -moz-linear-gradient(top, rgba(230,240,163,1) 0%, rgba(210,230,56,1) 50%, rgba(195,216,37,1) 51%, rgba(219,240,67,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,240,163,1)), color-stop(50%,rgba(210,230,56,1)), color-stop(51%,rgba(195,216,37,1)), color-stop(100%,rgba(219,240,67,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(230,240,163,1) 0%,rgba(210,230,56,1) 50%,rgba(195,216,37,1) 51%,rgba(219,240,67,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */ } .button12{ color:#fff; border:1px solid #de6106; text-shadow: 1px 1px 1px #de6106; filter: dropshadow(color=#de6106, offx=1, offy=1); background: rgb(255,103,15); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,103,15,1) 0%, rgba(255,103,15,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,103,15,1)), color-stop(100%,rgba(255,103,15,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff670f', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */ }

other source : http://viva.co.id, http://tutorial101.blogspot.com, http://dailymotion.com

0 Response to "CSS Buttons"

Posting Komentar

Langganan: Posting Komentar (Atom)

Contact

Nama

Email *

Pesan *