Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...

seo Using CSS3 Filters to Image 2013

Seo Master present to you:
Add descriptions to Labels
Filter effects are a way of processing an element's rendering before it is displayed in the document. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer (such as a raster image) and then that buffer is composited into the elements parent. Filters apply an effect before the compositing stage. Examples of such effects are blurring, changing color intensity and warping the image. Although originally designed for use in SVG, filter effects are a set a set of operations to apply on an image buffer and therefore can be applied to nearly any presentational environment, including CSS. They are triggered by a style instruction (the ‘filter’ property). This specification describes filters in a manner that allows them to be used in content styled by CSS, such as HTML and SVG. It also defines a CSS property value function that produces a CSS <image> value.

CSS3 Filters are a pretty exciting prospect for us Web Designers as they make effects that we typically associate with Photoshop, possible to apply in the browser with ease. Assuming across-the-board support eventually arrives, we can wave goodbye to countless annoying sprites for simple hover effects and instead, replace this tedious process with a single line of simple CSS.
The basic filters as listed in the W3C Draft are as follows: grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast,blur, drop-shadow, custom.

Code: apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

Grayscale
img {
    -webkit-filter:grayscale(1);
}

img:hover {
    -webkit-filter:grayscale(0);
}

Saturate
img {
    -webkit-filter:saturate(4);
}
img:hover {
    -webkit-filter:saturate(1);
}

Sepia 
img {
    -webkit-filter:sepia(1);
}

img:hover {
    -webkit-filter:sepia(0);
}

Hue Rotate
img:hover {
    -webkit-filter:hue-rotate(360deg);
}

Invert

img {
    -webkit-filter:invert(1);
}

img:hover {
    -webkit-filter:invert(0);
}


Brightness

img {
    -webkit-filter:brightness(-0.5);
}

img:hover {
    -webkit-filter:brightness(0);
}


Hue-rotate and Animate

@-webkit-keyframes hue { 
    100% { -webkit-filter:hue-rotate(360deg); }  
}

img:hover {
    -webkit-animation:hue 1s linear infinite;
}



Grayscale and Brightness

img { 
    -webkit-filter:grayscale(1) brightness(-0.4);
}

img:hover {
    -webkit-filter:grayscale(0) brightness(0);
}



Demo

Grayscale

Grayscale is a very basic effect that I think we would see a lot more of if we could achieve it with a single line of CSS rather than having to use a sprite image.

DEMO




Saturate


Sepia


Brightness



Grayscale and Brightness




2013, By: Seo Master

seo Dropdown Menu Colors 2013

Seo Master present to you:
Dropdown Menu Colors A CSS powered Drop Down Menu for Blogger.






Code:

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

#css-menu {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FF7E00;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0onU2dXbo63ZHU2XkBcXz_VEOhmbditk5cR4BhEAyb7CcBCbLwsUXBVc7_HWqsiR8Gui7I0DOjUfFV6l0F9lsrWxpBi89pnQu3xZ9LPriMVzq58K0yi6M5d_fGaj4hVFXqa7Z_kp9Fk/s26/bg-nav-foot.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    height: 46px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.nav {
    float: left;
    height: 26px;
    line-height: 1;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    z-index: 99;
}
.nav a {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    color: #111111;
    display: block;
    position: relative;
    z-index: 100;
}
.nav li {
    float: left;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 5px;
    margin-top: 0;
}
.nav li a {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    -x-system-font: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL7_pht_NsCzQW5bpWDI03jXLzq2DcjkdIZTK3mtQC9y_2pK0SIb2tREM-qRLRA8JAvuWcbEj79f6kxFpH6F1V3t2EzujIqYN1BmeFnyQoqT6dfNPBfVaKYrJOT-YS7Ff_AklNjHuGGMw/s48/li-right.jpg");
    background-origin: padding-box;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto auto;
    font-family: Arial,serif;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 15px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 6px;
}
.nav li a span {
    color: #FFFFFF;
    font-weight: bold;
    padding-bottom: 4px;
    padding-left: 0;
    padding-right: 12px;
    padding-top: 5px;
}
.nav li.current-cat a, .nav li.current-cat a, .nav li:hover a, .nav li a:hover {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    -x-system-font: none;
    color: #FFFFFF;
    font-family: Arial,serif;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 15px;
    margin-bottom: 0;
}
.nav li:hover span, .nav li a:hover span {
    font-weight: bold;
}
.nav li.current-cat a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #111111;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRs9jWJhcoAuKghYYRiSf6eBbTQdDt8TwfYFEebe1heGNaohKdi8dXpGupGyGZcyRZSHj_PiCBB8Y4rF4eBvcV3KmoEm22tMFsmLF2vAeyp-o_z8SbryPtnzw0W7fODCDaToQ0rUF2GA/s101/hnjn.gif");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    color: #EEEEEE;
    height: 16px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: -1px;
    padding-left: 10px;
    padding-top: 7px;
    width: 100px;
}
.nav li.current-cat a span {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYxrY4LHGHUgixLgBCkPvKxQICZErBT7uIWbeDPV2127jZ7cbXQ6pHJTB1KWsFIpFUOutaX5JhUqWWtfoTPuK53laJ_wBPTYldsPjf-z7r8P9cf5m2Juuo2n9jZf5MzOlpLZOvystoHo/s18/hbhjs.png");
    background-origin: padding-box;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: auto auto;
    padding-left: 20px;
}
.nav li.news:hover, .nav li.news:hover ul {
    background-color: black;
}
.nav li.news1:hover, .nav li.news1:hover ul {
    background-color: #017CB5;
}
.nav li.news1:hover ul li {
    border-bottom-color: #014F73;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #038BCA;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news2:hover, .nav li.news2:hover ul {
    background-color: #A92267;
}
.nav li.news2:hover ul li {
    border-bottom-color: #701544;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #C72B7B;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news3:hover, .nav li.news3:hover ul {
    background-color: #0F5594;
}
.nav li.news3:hover ul li {
    border-bottom-color: #0A3963;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #166BB7;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news4:hover, .nav li.news4:hover ul {
    background-color: #693770;
}
.nav li.news4:hover ul li {
    border-bottom-color: #45254A;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #9A52A4;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news5:hover, .nav li.news5:hover ul {
    background-color: #3B6A06;
}
.nav li.news5:hover ul li {
    border-bottom-color: #264404;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #4D8909;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news6:hover, .nav li.news6:hover ul {
    background-color: #46505C;
}
.nav li.news6:hover ul li {
    border-bottom-color: #252A30;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #5C6978;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news7:hover, .nav li.news7:hover ul {
    background-color: #1B227D;
}
.nav li.news7:hover ul li {
    border-bottom-color: #10154B;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #212994;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news8:hover, .nav li.news8:hover ul {
    background-color: #9A1313;
}
.nav li.news8:hover ul li {
    border-bottom-color: #650D0D;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #B81919;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news9:hover, .nav li.news9:hover ul {
    background-color: #A92267;
}
.nav li.news9:hover ul li {
    border-bottom-color: #741847;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #C52C7A;
    border-top-style: solid;
    border-top-width: 1px;
}
.nav li.news1:hover ul li.first, .nav li.news2:hover ul li.first, .nav li.news3:hover ul li.first, .nav li.news4:hover ul li.first, .nav li.news5:hover ul li.first, .nav li.news6:hover ul li.first, .nav li.news7:hover ul li.first, .nav li.news8:hover ul li.first, .nav li.news9:hover ul li.first {
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
}
.nav li.news1:hover ul li.last, .nav li.news2:hover ul li.last, .nav li.news3:hover ul li.last, .nav li.news4:hover ul li.last, .nav li.news5:hover ul li.last, .nav li.news6:hover ul li.last, .nav li.news7:hover ul li.last, .nav li.news8:hover ul li.last, .nav li.news9:hover ul li.last {
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: medium;
}
.nav li a:hover, .nav li a:active {
    color: #B80000;
}
.nav li ul {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    left: -999em;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 1px;
    margin-top: 0;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 5px;
    position: absolute;
    width: 168px;
    z-index: 999999;
}
.nav .last ul {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 0;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 0;
    position: absolute;
    width: 168px;
    z-index: 999;
}
.nav li ul li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: -moz-use-text-color;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: none;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: medium;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: -moz-use-text-color;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: none;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: medium;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: medium;
    clear: both;
    margin-left: 0;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
    width: 160px;
}
.nav li ul li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #FFFFFF !important;
    font-size: 12px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-transform: none;
}
.nav li:hover ul li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    font-weight: bold;
}
.nav li:hover, .nav li.hover {
    position: static;
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul {
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul {
    left: auto;
}

HTML 
 <div id='css-menu'>
<ul class='nav'>
<li class='current-cat iconhome'><a href='/'><span>Home</span></a></li>
<li class='news1'><a href='#'><span>Css menu 1</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 1.1</a></li>
<li><a href='#'>Submenu 1.2</a></li>
<li><a href='#'>Submenu 1.3</a></li>
<li><a href='#'>Submenu 1.4</a></li>
<li><a href='#'>Submenu 1.5</a></li>
<li class='last'><a href='#'>Submenu 1.6</a></li>
</ul>
</li>
<li class='news2'><a href='#'><span>Css menu 2</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 2.1</a></li>
<li><a href='#'>Submenu 2.2</a></li>
<li><a href='#'>Submenu 2.3</a></li>
<li><a href='#'>Submenu 2.4</a></li>
<li><a href='#'>Submenu 2.5</a></li>
<li class='last'><a href='#'>Submenu 2.6</a></li>
</ul>
</li>
<li class='news3'><a href='#'><span>Css menu 3</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 3.1</a></li>
<li><a href='#'>Submenu 3.2</a></li>
<li><a href='#'>Submenu 3.3</a></li>
<li><a href='#'>Submenu 3.4</a></li>
<li><a href='#'>Submenu 3.5</a></li>
<li class='last'><a href='#'>Submenu 3.6</a></li>
</ul>
</li>
<li class='news4'><a href='#'><span>Css menu 4</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 4.1</a></li>
<li><a href='#'>Submenu 4.2</a></li>
<li><a href='#'>Submenu 4.3</a></li>
<li><a href='#'>Submenu 4.4</a></li>
<li><a href='#'>Submenu 4.5</a></li>
<li class='last'><a href='#'>Submenu 4.6</a></li>
</ul>
</li>
<li class='news5'><a href='#'><span>Tên menu 5 </span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 5.1</a></li>
<li><a href='#'>Submenu 5.2</a></li>
<li><a href='#'>Submenu 5.3</a></li>
<li><a href='#'>Submenu 5.4</a></li>
<li><a href='#'>Submenu 5.5</a></li>
<li class='last'><a href='#'>Submenu 5.6</a></li>
</ul>
</li>
<li class='news6'><a href='#'><span>Css menu 6</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 6.1</a></li>
<li><a href='#'>Submenu 6.2</a></li>
<li><a href='#'>Submenu 6.3</a></li>
<li><a href='#'>Submenu 6.4</a></li>
<li><a href='#'>Submenu 6.5</a></li>
<li class='last'><a href='#'>Submenu 6.6</a></li>
</ul>
</li>
<li class='news7'><a href='#'><span>Css menu 7</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 7.1</a></li>
<li><a href='#'>Submenu 7.2</a></li>
<li><a href='#'>Submenu 7.3</a></li>
<li><a href='#'>Submenu 7.4</a></li>
<li><a href='#'>Submenu 7.5</a></li>
<li class='last'><a href='#'>Submenu 7.6</a></li>
</ul>
</li>
<li class='news8'><a href='#'><span>Css menu 8</span></a>
<ul class='children'>
<li class='first'><a href='#'>Submenu 8.1</a></li>
<li><a href='#'>Submenu 8.2</a></li>
<li><a href='#'>Submenu 8.3</a></li>
<li><a href='#'>Submenu 8.4</a></li>
<li><a href='#'>Submenu 8.5</a></li>
<li class='last'><a href='#'>Submenu 8.6</a></li>
</ul>
</li>
</ul>
<div class='clear'/>
</div>


2013, By: Seo Master

seo Resize Popular Posts Image thumbnails 2013

Seo Master present to you:
Resize Popular Posts Image thumbnailsResize Blogger popular post thumbnails, I got a question in a comment how to change the thumbnail size in Blogger popular post gadget, in my Trim Blogger popular post snippets right article. Here's how to do it, hack is similar to my previous popular post hacks.


Code: CSS
apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,



#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
#PopularPosts1 img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
Popular Posts css3


#PopularPosts1{max-width:310px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
}



2013, By: Seo Master

seo Css3 Button 2013

Seo Master present to you:
CSS3 Button Generator.
CSS Button Generator will create beautiful css buttons for you to use on your web pages without the need for any images.
How To Apply This Label Hack?






Code:

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,



.duy-bcss3 {
    cursor:pointer;
    border:3px solid #6b6b6e;
    background-color:#f2ac08;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcd600', endColorstr='#f2ac08');
    background-image:-webkit-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
    background-image:-moz-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
    background-image:-ms-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
    background-image:-o-linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
    background-image:linear-gradient(top, #fcd600 8%, #ffba3b 55%, #f2ac08 100%);
    padding:18px 36px;
    -webkit-border-radius:13px;
    -moz-border-radius:13px;
    border-radius:13px;
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 3px 11px #515151;
    text-shadow:0px 1px 0px rgba(0,0,0,0.3);
    color:#140114;
    font:normal 20px 'Century Gothic',Helvetica,Arial,Sans-Serif;
    text-decoration:none;
    outline:none;
    vertical-align:middle;
}

.duy-bcss3:hover {
    border-color:#4a4743;
    background-color:#fcc203;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fcc203', endColorstr='#de7104');
    background-image:-webkit-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
    background-image:-moz-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
    background-image:-ms-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
    background-image:-o-linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
    background-image:linear-gradient(top, #fcc203 0%, #fa8805 50%, #de7104 100%);
    color:#ffffff;
}

.duy-bcss3:active {
    background-color:#de7104;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#de7104', endColorstr='#fcc203');
    background-image:-webkit-linear-gradient(top, #de7104, #fcc203);
    background-image:-moz-linear-gradient(top, #de7104, #fcc203);
    background-image:-ms-linear-gradient(top, #de7104, #fcc203);
    background-image:-o-linear-gradient(top, #de7104, #fcc203);
    background-image:linear-gradient(top, #de7104, #fcc203);
}




HTML: <a class="duy-bcss3" href="URL" target="_blank">DEMO</a>


2013, By: Seo Master
Powered by Blogger.
Design by Dev Nasser