Social Plugins: Stay Tuned Social Subscription Widget V 2.0

There are literally hundreds of social media sharing plugins that can display social share button for WordPress, blogger and many more are added each day. Today we have a great social subscription plugins with simple design, which we have created early, its a second version of our previous social subscription plugins with tooltip. In the updated version we have removed some CSS reset bugs and also make some addition in the plugin layout.

The plugin allow visitors to join social networks, such as Facebook, Twitter, Pinterest, Google Plus,  Rss Feed, Linkedin, Tumbler and the lastly on YouTube.

Why Social Plugin Important: A Writer Chuck Price share an article on Search engine watch before 3 months ago and said social profiles are very important for boosting your search engine ranking. Read the statement below or you can read full article about ranking, traffic and backlinks.

“Think about where your target audience spends their time. Is it Facebook, Twitter, pinterest? You need to be there as well. Like blog and forum communities, getting to know people via social media opens up link opportunities.”

So now leave the discussion and go ahead to add social plugin to your blogger blog.

before adding see live demo by clicking the live preview button below.

Update: Bug Fixes for alignment and added Responsive Mobile friendly width property. For the example of update you check the great tutorial written by martin wolf.

Live Preview

How to add it blogger

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template:

]]>

4. Paste the following code immediately above (before) it:

#social_profiles-wrap {
    background: rgba(255,255,255,0.3);
    width: 94%;
    height: auto;
    float: left;
    margin: 10px 0 10px 0;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    font-family: 'Open Sans Condensed', Verdana;
    border: 1px solid #f2f2f2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    text-decoration: none;
}

#social_profiles-wrap p {
    color: #446cb3;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
}

.social_profiles {
    display: inline-block;
    padding: 5px 0;
}

ul.social_profiles {
    background: none;
    float: none;
    margin: 0 37px;
    text-decoration: none;
}

/* fix for ul li default arrow symbol*/
ul.social_profiles li {
    background: none !important;
    padding: 0!important;
}

.social_profiles li {
    display: inline;
    margin-top: 40px;
    list-style-type: none;
}

.social_profiles li a {
    display: inline-block;
    list-style-type: none;
    width: 40px;
    height: 40px;
    outline: none;
    margin-right: 7px;
    position: relative;
    vertical-align: middle;
    z-index: 3;
    text-decoration: none;
}

.social_profiles li a > :last-child {
    margin-right: 0 !important;
}

.social_profiles li .facebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -45px;
}

.social_profiles li .gplus {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -90px;
}

.social_profiles li .pinterest {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -135px;
}

.social_profiles li .rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -180px;
}

.social_profiles li .linkedin {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -225px;
}

.social_profiles li .tumblr {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -270px;
}

.social_profiles li .youtube {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -315px;
}

.social_profiles li .mail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -360px;
}

.social_profiles li a span {
    width: 60px;
    height: auto;
    padding: 2px;
    left: 50%;
    margin-left: -38px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 5px solid #446cb3;
    background: #446cb3;
    text-indent: 0px;
    position: absolute;
    pointer-events: none;
    border-radius: 5%;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social_profiles li a span:before,
.social_profiles li a span:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.social_profiles li a span:after {
    bottom: -15px;
    margin-top: 6px;
    margin-left: -10px;
    border-top: 10px solid #446cb3;
}

.social_profiles li a:hover span {
    opacity: 0.9;
    bottom: 50px;
}

Now lets go and do one more step…

5. Now again look for the following code in your Template:

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this.

you just need to locate post-footer  (from top) one.

6. Paste the following code immediately below (after) opening post-footer div:

Don't Miss Any Update, Join Us on Social Networks.

• Facebook


• Twitter


• Googl+


• Pinterest


• RSS


• LinkedIn


• Tumblr


• Youtube

Note:- Change the links highlighted in yellow color with your social profiles links.

I hope you enjoyed this little effect and find it useful!.. As we state in our previous tutorial, it will only work in modern browsers that support pseudo-elements and CSS transitions. if you have question or need to change something like width, font family, color or facing issue with alignment, please let us know we try to help you on every way. lastly want to say happy blogging..!! :)

Read More

Add CSS3 & HTML5 Email Subscription Widget To Blogger Blog

After a long we are back again with a beautiful subscription box, If you aren’t building a email subscription widget, you’re missing significant opportunities to capture leads, build community, and create a sustainable way to communicate with those who are interested in what you have to say (and/or sell). Your subscriber is like diamond and it’s a resource you must develop, nurture and grow. It doesn’t matter what type of business or nonprofit work you are in or how big or small you are. You need to build your email subscription. But simply putting a newsletter sign-up form on your site isn’t the most effective thing you can do.  It’s also about how you place it on your site, what tactics you use to drive subscribers and it’s a LOT about content… what you share and how you communicate with your email subscription list so that you provide them value. So today we sharing with you a subscription widget with elegant design we have used image for background and also use HTML5 required attribute and some eye caching CSS3 effects we hope you may like it.

What our subscription widget is going to look like. See image below.

Live Preview

Little brief about HTML5

We will use HTML5's new required tag. Right now, different browsers will do different things when a form using HTML5 elements is submitted. When the form is submitted, most browsers will prevent the form from being submitted and will display a "hint" to the user, marking the first field that is required and has no value.

HTML5 validation works according to the type attribute that is set within the form fields. For years HTML only supported a handful of type attributes, such as type="text"  but with HTML5 there are a over a dozen new input types including email and url which we are going to use in our form.

add it to blogger blog

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template.

]]>

4. Paste the following code immediately above (before) it:

#subs_wrapper {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhwfagBRXEoY2fUNUtWTs9do-uiQWLy-0-mOgm6cwqJc6pHENdnsYczdHxUdyXREwD1b5TQhczM46lBxeqeoIRfab2ADSVH_h-DeSzfOsApKsXBfz4T3ayPtpK9noHHIZa80dvsuVabX8I/s1600/Subcription_bg.png) no-repeat;
    width: 300px;
    height: 250px;
    padding: 10px 10px;
    margin: 5px;
}

#subs_wrapper p {
    font-family: Tahoma, Geneva, sans-serif;
    margin-top: 60px;
    color: yellow;
    text-align: center;
    margin-right: 20px;
}

.subs_form input {
    height: 27px;
    font-size: 15px
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: 1px solid #26beaf;
    width: 238px;
    margin: inherit;
    padding: 6px;
    float:;
}

.subs_form input {
    margin: 2px;
}

.subs_form input {
    border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 3px;
    padding-right: 30px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

.subs_form input:focus {
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 3px #aaa;
}

*:focus {
    outline: none;
}

:-moz-placeholder {
    color: blue;
}

.emailinput {
    color: #666;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
}

::-webkit-input-placeholder {
    color: blue;
}

::-webkit-validation-bubble-message {
    padding: 1em;
    margin-left: -40px;
}

button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 10px 96px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
    list-style-type: none;
}

button.submit:hover {
    opacity: .85;
    cursor: pointer;
}

button.submit:active {
    border: 1px solid #20911e;
}

Now lets go and do one more step…

5. Now again look for the following data tag in your Template.

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this. Locate the post-footer (from top) one. 

6. Paste the following code immediately below (after) it:

Get Latest Updates To Your Inbox..!

 
   
   

We Always Respect Your Privacy.

Widget alignment

• Change the value of float property:
  Align right: set it to right;
  Align left: set it to left;

Note:- Must change mybloggertricks highlighted in yellow with your feedburner username..

Now click on save button and View your blog. The widget should appear on post pages.

I hope this tutorial helped. If you have any questions, please feel free to share them with us. Take care :)

Understaning CSS selectors for beginners – ‘>’, ‘+’ and ‘~’ symbols

CSS is an absolute website beautifier, with Cascading Style Sheets (CSS) you can make your website just appear like anything you want. Hope most of you know about fundamental CSS rules, so what we are here to refer is about CSS selectors. Here we will explain some familiar CSS selectors and along with that we will also make you understand what ‘>’, ‘+’ and ‘~’ symbols mean in CSS selectors.

CSS selectors for beginners

In order to style particular element in your website you have to first find out the selector. In CSS, “selector” is an instruction that tells web browser which element to style for that particular CSS. All HTML element that starts with opening tag <> and ends with closing tag are selectors (for example:

Some Text

, Some Link). Other than that there are element selector (p{}), id selector (#container{}) and class selector (.widget box title{}). In the example below you can see the selector that is before the opening brace (.h2 posttitle). Alright, here we will describe CSS selectors one by one in order and this post is for absolute beginners.

 .h2 posttitle { text-align: center; color: blue; font-size: 32px; } 

Universal selector (*)

Yep, it is global and a powerful selector that targets each and every element on the whole document and it is applied using asterisk symbol ( * ).

* {color: green;}

Assume that the HTML document contains elements like h1, h3, paragraph, ordered list, unordered list and preformatted text. So you want to apply green color to all those elements, so instead of writing CSS like this (body, h1, h3, p, ul, ol, li, pre{color: green}) you can use the universal selector.

Element type selector

Element type selector matches every HTML elements in the document tree by its tag name. For example you have a page with three h2 headings (

Some H2 text

), so adding the below CSS applies to all h2 tags.

 h2 { font-color: #444; font-family: helvetica,sans-serif; } 

ID selector – #

Id selector are identified using pound # sign and it matches an HTML element that has ID attribute defined.

For example you can style this element

by applying CSS like this.

 #bodyblock { Padding: 15px; Width: 70% } 

Class selector – (.)

Id’s are just styling single element but on the other hand classes are used to style the group of elements that has a same class name defined. This is the most powerful selector which is used extremely. HTML elements have a class defined like this

and it is called using css .mainheding like this.

 .mainheading { Text-align: center; } 

Descendant selector

Descendant selector matches all the elements that are descendants of the defined element; it targets the nested ones by separating two selectors using blank space. For example you know that you can nest HTML elements inside one another like this.

 
 
First Heading
 
 
Second Heading
 
 
Third Heading
 
 
 
 

So to style just the third heading you can use descendant selector like this.

 div div div h2{ color:red; } 

Attribute selector

CSS can target HTML elements using their attributes for example:

 
 First name: 
 Your Email: 
  
 

To style the submit button you can use CSS like this.

 input[type=submit] { Width: 30%; Cursor: pointer; Color: #fff; Background-color: #000; } 

Understanding ‘>’, ‘+’, ‘~’ symbols in CSS selectors

Alright we have seen the basic and most used CSS selectors, other than this there are pseudo-class and pseudo-element selectors which we are not going to discuss here. Most beginners confuse greater than >, plus + and tilde ~ symbols in CSS selectors, so here lets see that in brief.

Child selector ‘>’

This selector selects the direct children’s of the particular element. For example take a look at the HTML and CSS below. The CSS #sample > h2 just targets the immediate child of div id sample that is the rules will  be only applied to first heading and third heading and not the second heading which is nested inside.
————-HTML

 
 
First Heading
 
 
 Second Heading
 
 
 Third heading 
 
 

————–CSS

 div#sample > h2 { background-color: yellow; color:blue; font-size: 22px; } 

Adjacent sibling selector (+)

Adjacent sibling combinator uses + sign that targets all selectors having same parent but the target is immediate sibling that is it selects all elements that comes next to the first one.

 
 
Para One
 
Para Two
 
block
 
Para Three
 
Fourth Para
 
 

From the example above if we use selector like p + p {} it only gets applied to para two and fourth para. And if we remove that div block then the CSS will be applied to second para, third para and fourth para, leaving the first one.

 p + p { background-color: yellow; color:blue; font-size: 22px; } 

General Sibling Combinator

General sibling selector uses ~ tilde symbol and it is similar to adjacent sibling selector, but the thing is the second selector doesn’t have to immediately succeed the first one. It means it selects every element after the former selector. Take the above HTML what we used for adjacent sibling selector as an example. Now the below CSS will only be applied to second para, third para as well as fourth para.

 p ~ p { background-color: yellow; color:blue; font-size: 22px; } 

Hope as a beginner you have understood common CSS selectors and when to use ‘>”, ‘+’ and ‘~’ symbols. CSS are very fun to learn and implement, try playing with CSS in your website and you will grasp it very easily and also try to use browser developer tool (CTRL + Shift + I) which will be helpful to play around with css. This is our first CSS tutorial and in next coming days we will be posting a lot of HTML and CSS tutorials, so to receive more such updates subscribe to our feeds or follow us on Facebook, Twitter and Google Plus.

Read More

How To Add Flat Scrolling “Back To Top” Button Into Blogger Blog

Performs a smooth page scroll to an anchor on the same page using JQuery, it is very cool way to attract your readers and maker your web site navigation easy.Today in this tutorial we will share a awesome JQuery smooth scrolling back to top button, It appears on the right side bottom only when the user scrolls down the page and disappears as he scrolls up. A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. We have kept the installation process a one step process. Please see this button in action towards the bottom right corner of this blog.

The markup uses the Unicode entity for a Up Arrow Triangle (▲) right in it. If you have a UTF-8 charset that should be no big deal..

How to add it to blogger blog

First You need to add this JQuery and JavaScript Code Snippet in your blogger template head section before closing tag.

The follow the next steps below…

1. Login to your blogger dashboard.


2. Go to your blogger Layout.


3. Click Add A Gadget.


4. In Add A Gadget window, select HTML/JavaScript.


5. Copy the code below and paste it inside the content box. 

If you experience any issues, feel free to comment here. I'll love to hear feedback and try my best to fix bugs with the snippet. Stay connected for more spicy updates and don’t forget to share this tutorial with your friends.!! Enjoy!

Image Credit:- Cygnis Media

Read More

Design Your Own Creative CSS3 & HTML5 Search Form

A neat way to spice up your blog and search form is to make your search form with HTML5 and CSS3. One of the first improvements HTML5 brings to web forms is the ability to set the placeholder text. Placeholder text is displayed when the input field is either empty or not in focus. Adding the required attribute to any input/text area element will tell the browser that a value is required before the form can be submitted. Thus, a form cannot be submitted if a required field has not been filled out. So, let's go ahead and add the required attribute to our search form elements. A search box is probably one of the most common UI elements around, and I think there is no need to explain its purpose anymore. Whether it’s about a website or a web application, to increase user experience for it, you may want to add a stylish search box.
we will start by creating basic HTML5 structure

You may have noticed the HTML5′s specific attributes like placeholder and required here’s a short description:

• placeholder- Basically, this attribute shows a text in a field until the field is focused upon, then it just hides the text.


• required- This specifies that the current element is a required part of a form submission.

HTML5 also brought us a new value for the type attribute: type="search". Though, because of cross browser inconsistency, I decided to skip it for now.

Let's style all of our core form elements. Add style given below to form element by selecting #search-form ID.

/* Style the search input field. */
#search-form {
float:auto;
width:270px;
height:36px;
line-height:15x;
text-indent:5px;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;;
font-size:.9em;
color:#444;
background: #fff;
border:solid 1px #d9d9d9;
box-shadow: 1px 0 0px #aaa;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
#search-form:focus{
border: 1px solid #446cb3;
box-shadow: 0 0 1px #446cb3;
-moz-box-shadow: 0 0 1px #446cb3;
-webkit-box-shadow: 0 0 1px #446cb3;
}

Remove :focus Style

Webkit automatically adds some styling to input elements when they are in focus. Since we'll be adding our own styles, we want to override these defaults:

*:focus {outline: none;}

Style your Placeholder Text

Here's a quick tip, if you want to style your placeholder text, there are some browser prefixes to help you:

:-moz-placeholder {
    color: #f1f1f1;
}
::-webkit-input-placeholder {
    color: #f1f1f1;
}

Now, let's stylize submit button with some CSS3 styles. Some of these are reward users who use modern browsers.

/* Form submit button */
.search-form button {
    overflow: visible;
    position: relative;
    float: auto;
    left:-6px ;
    top: 1px;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #446cb3;
    border-radius: 0 3px 3px 0;    
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  
.search-form button:hover{    
    background: #446cb4;
}  
.search-form button:active,
.search-form button:focus{  
    background: #446cb4;
    outline: 0;
    box-shadow: 0 0 1px #446cb3;
  -moz-box-shadow: 0 0 1px #446cb3;
  -webkit-box-shadow: 0 0 1px #446cb3;
}

Using the ::before Selector

Now we want to add a little triangle to our button that help direct and guide the eye. This can be done using images, but in our case we are going to do it using pure CSS.
Because it is purely a presentational element that is not vital to the page's functionality, we are going to add a small triangle that points left using the ::before pseudo selector.

/* left arrow */
.search-form button:before {  
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #446cb3 transparent;
    top: 12px;
    left: -6px;
}
.search-form button:hover:before{
    border-right-color: #446cb3;
}
.search-form button:focus:before, .search-form button:active:before {
border-right-color: #446cb3;
}   
/* remove button spacing in Firefox */
.search-form button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

here is how our final style.css should look like.

/* Style the search input field. */
*:focus {outline: none;}
#search-form {
float:auto;
width:270px;
height:36px;
line-height:15x;
text-indent:5px;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;;
font-size:.9em;
color:#444;
background: #fff;
border:solid 1px #d9d9d9;
box-shadow: 1px 0 0px #aaa;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
#search-form:focus{
  border: 1px solid #446cb3;
box-shadow: 0 0 1px #446cb3;
  -moz-box-shadow: 0 0 1px #446cb3;
-webkit-box-shadow: 0 0 1px #446cb3;
}
:-moz-placeholder {
    color: #f1f1f1;
}
::-webkit-input-placeholder {
    color: #f1f1f1;
}
/* Form submit button */
.search-form button {
    overflow: visible;
    position: relative;
    float: auto;
    left:-6px ;
    top: 1px;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #446cb3;
    border-radius: 0 3px 3px 0;     text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  
.search-form button:hover{    
    background: #446cb4;
}  
.search-form button:active,
.search-form button:focus{   
   background: #446cb4;
   outline: 0;
   box-shadow: 0 0 1px #446cb3;
  -moz-box-shadow: 0 0 1px #446cb3;
    -webkit-box-shadow: 0 0 1px #446cb3;
}
.search-form button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #446cb3 transparent;
    top: 12px;
    left: -6px;
}
.search-form button:hover:before{
    border-right-color: #446cb3;
}
.search-form button:focus:before, .search-form button:active:before{
border-right-color: #446cb3;
}     
.search-form button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}

Making it cross compatible.

We will add add normalize.css which makes all the browsers render all elements more consistently by resetting its styles.add normalize style sheet link your head section. look Like below..

Go ahead and take a look at your final Look!

I hope you will enjoyed this tutorial, if you have any trouble regarding this tutorial feel free to post your comment below and also don’t forget to share this tutorial.

Read More

Creative: pure Css3 Download Button

Today in this tutorial we learn about how to design and customize awesome download buttons in minutes. Button states saved as images and toggled by CSS are so out of date and also it’s painful for every website developer. we'll cover prettying it up using CSS, including some CSS3!. We all know why: they’re easily editable, cross-platform, lightweight, accessible. Below you can see samples of just some of download buttons designs you can develop by spending few minutes.

You’re free to change any of the hex colors you see in the CSS and the button background color will change instantly.The buttons are free for personal and commercial use, so download them now and start tweaking them for your brand.

Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. hile declaring the a solid color uses background-color property in CSS, gradients use background-image. This comes in useful in a few ways.

How To Use These Buttons In Your Blog

1. Go to Template > Edit HTML.
2. Locate the tag near the top of the template.
3. Copy the code below and insert it right below the tag.

/* === Button Style === */
.mbt-button {
background-color: #0C464A;
background-image: -o-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -moz-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -webkit-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -ms-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: linear-gradient(to bottom, #0C464A 0%, #276268 100%);
border: 1px solid #0C464A;
border-bottom: 1px solid #0C464A;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #0D5357;
-webkit-box-shadow: 0 1px 0 0 #0D5357 inset ;
-moz-box-shadow: 0 1px 0 0 #0D5357 inset;
-ms-box-shadow: 0 1px 0 0 #0D5357 inset;
-o-box-shadow: 0 1px 0 0 #0D5357 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}

.mbt-button:hover {
opacity:.85;
cursor: pointer;
}

.mbt-button:active {
border: 1px solid #0D5357;
box-shadow: 0 0 10px 5px #0D5357 inset;
-webkit-box-shadow:0 0 10px 5px #0D5357 inset ;
-moz-box-shadow: 0 0 10px 5px #0D5357 inset;
-ms-box-shadow: 0 0 10px 5px #0D5357 inset;
-o-box-shadow: 0 0 10px 5px #0D5357 inset;
}

Save, view your blog.

Now time to call button style when you writing a post..

your normal link will look like this..

Css3 Button

Just wrap an anchor tag around a button element. ( In our case after applying button element our link look like this.)

Css3 Button

Style 2

/* === Button Style === */
.mbt-button {
background-color: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
border: 1px solid #0d73b3;
border-bottom: 1px solid #0d73b3;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #0d73b3;
-webkit-box-shadow: 0 1px 0 0 #0d73b3 inset ;
-moz-box-shadow: 0 1px 0 0 #0d73b3 inset;
-ms-box-shadow: 0 1px 0 0 #0d73b3 inset;
-o-box-shadow: 0 1px 0 0 #0d73b3 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}

.mbt-button:hover {
opacity:.85;
cursor: pointer;
}

.mbt-button:active {
border: 1px solid #0d73b3;
box-shadow: 0 0 10px 5px #0d73b3 inset;
-webkit-box-shadow:0 0 10px 5px #0d73b3 inset ;
-moz-box-shadow: 0 0 10px 5px #0d73b3 inset;
-ms-box-shadow: 0 0 10px 5px #0d73b3 inset;
-o-box-shadow: 0 0 10px 5px #0d73b3 inset;
}

Style 3

/* === Button Style === */

.mbt-button {
background-color: #446CB3;
  background-image: -webkit-linear-gradient(top, #446CB3, #2959ab);
  background-image: -moz-linear-gradient(top, #446CB3, #2959ab);
  background-image: -ms-linear-gradient(top, #446CB3, #2959ab);
  background-image: -o-linear-gradient(top, #446CB3, #2959ab);
  background-image: linear-gradient(to bottom, #446CB3, #2959ab);
border: 1px solid #446CB3;
border-bottom: 1px solid #446CB3;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #446CB3;
-webkit-box-shadow: 0 1px 0 0 #446CB3 inset ;
-moz-box-shadow: 0 1px 0 0 #446CB3 inset;
-ms-box-shadow: 0 1px 0 0 #446CB3 inset;
-o-box-shadow: 0 1px 0 0 #446CB3 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}

.mbt-button:hover {
opacity:.85;
cursor: pointer;
}

.mbt-button:active {
border: 1px solid #446CB3;
box-shadow: 0 0 10px 5px #446CB3 inset;
-webkit-box-shadow:0 0 10px 5px #446CB3 inset ;
-moz-box-shadow: 0 0 10px 5px #446CB3 inset;
-ms-box-shadow: 0 0 10px 5px #446CB3 inset;
-o-box-shadow: 0 0 10px 5px #446CB3 inset;
}

Style 4

/* === Button Style === */

.mbt-button {
background-color: #68b12f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background-image: -webkit-linear-gradient(top, #68b12f, #50911e);
background-image: -moz-linear-gradient(top, #68b12f, #50911e);
background-image: -ms-linear-gradient(top, #68b12f, #50911e);
background-image: -o-linear-gradient(top, #68b12f, #50911e);
background-image: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
.mbt-button:hover {
opacity:.85;
cursor: pointer;
}
.mbt-button:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}

We hope these buttons gives you some inspiration for creating some nice effects.

Got a question or need help customizing this CSS code? If you have a comment or suggestion instead, post it in the comments section below.

Read More