Skip to main content

CSS Button for Links and Input Boxes

CSS is the most important of a website. It controls how the webpage will look and feel. With the help of this most important part of webdesign you can customize your website in the way you like. Here in this blog you will find many CSS tricks and Blogger Tricks. Keep reading, I am going to introduce you with some cool and flat CSS buttons that you will really like to use on your website.

CSS Button for Links and Input Boxes

If you're a regular visitor of this blog than you may be familiar with my earlier post on New CSS Download Buttons and CSS3 Download Buttons. All the buttons are unique and can be used in any types of blogs. Take a look at the buttons given below. Try clicking on "Click It!".

Click It

Click It

Click It

Feel some Clickable effect on clicking on the buttons? These buttons are designed with CSS3 which means it will be compatible only on the CSS3 supported browsers. Luckily all major browsers like Google Chrome, Firefox, Opera, Safari etc. supports CSS3. If you liked the above buttons than follow the steps given below to add these buttons on your website.
  • First, copy the CSS code given below and add it in your style.css file or just wrap the code under the style tags.
.large{font-size: 26px;}
  .medium{font-size: 20px;}
  .small{font-size: 16px}
.spicy {
outline:none;
border: 0;
color: white !important;
text-decoration: none !important;
padding: 10px 16px;
line-height: 1.4;
cursor: pointer;
text-decoration: none !important;
font-family: Segoe UI;
font-weight: bold;
display: inline-block;
}
.spicy:hover {color: #ffffff;}
.spicy:active {
-webkit-transform:translate(3px, 3px);
-moz-transform:translate(3px, 3px);
-ms-transform:translate(3px, 3px);
-o-transform:translate(3px, 3px);
transform:translate(3px, 3px)
}
 .spicy-blue{
background: #4e68c7;
box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891,2px 3px 1px #3852b1,4px 3px 1px #203891,3px 4px 1px #3852b1,5px 4px 1px #203891,4px 5px 1px #3852b1,6px 5px 1px #203891;
}
.spicy-blue:active{
box-shadow:1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891;
}
.spicy-blue:hover{
background: #3d57b4;
}
 .spicy-black{
background: #40454d;
box-shadow: 1px 0px 1px #000,0px 1px 1px #404542,2px 1px 1px #000,1px 2px 1px #404552,3px 2px 1px #000,2px 3px 1px #404542,4px 3px 1px #000,3px 4px 1px #404542,5px 4px 1px #000,4px 5px 1px #404542,6px 5px 1px #000;
}
.spicy-black:active{
box-shadow:1px 0px 1px #000,0px 1px 1px #404542,2px 1px 1px #000,1px 2px 1px #404542,3px 2px 1px #000;
}
.spicy-black:hover{
background: #404542;
}
.spicy-purple{
background: #808095;
box-shadow: 1px 0px 1px #000,0px 1px 1px #404542,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #000,2px 3px 1px #404542,4px 3px 1px #000,3px 4px 1px #404542,5px 4px 1px #000,4px 5px 1px #404542,6px 5px 1px #000;
}
.spicy-purple:active{
box-shadow:1px 0px 1px #000,0px 1px 1px #404542,2px 1px 1px #000,1px 2px 1px #404542,3px 2px 1px #000;
}
.spicy-purple:hover{
background: #808099;
}
  • Use the following HTML Link to use the buttons as your link.
<a class="spicy-black spicy small" href="#">Click It</a>
  • You can choose from three different colors. Replace # from the above HTML link with the link on which you want to show clickable button effect.
If you're facing little difficulties in understanding the above CSS codes and how to use them than see the following steps. If you are a Blogger user than follow the following steps to add these colorful CSS buttons in your Blogger blog.
  • At first, you will need to sign in to your Blogger account.
  • After signing go to the Dashboard of the Blog on which you want to add these CSS buttons.
  • Now navigate to Template from the Dashboard.
  • In the Template page you will see a button which says "Edit HTML". Click on edit HTML and after that you'll see full HTML codes of your blog.
  • Now press CTRL+F to open the search box. Search for ]]></b:skin> in your Template.
  • Now add the following CSS code just above or before ]]></b:skin>.
    • .large{font-size: 26px;}
  .medium{font-size: 20px;}
  .small{font-size: 16px}
.spicy {
outline:none;
border: 0;
color: white !important;
text-decoration: none !important;
padding: 10px 16px;
line-height: 1.4;
cursor: pointer;
text-decoration: none !important;
font-family: Segoe UI;
font-weight: bold;
display: inline-block;
}
.spicy:hover {color: #ffffff;}
.spicy:active {
-webkit-transform:translate(3px, 3px);
-moz-transform:translate(3px, 3px);
-ms-transform:translate(3px, 3px);
-o-transform:translate(3px, 3px);
transform:translate(3px, 3px)
}
 .spicy-blue{
background: #4e68c7;
box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891,2px 3px 1px #3852b1,4px 3px 1px #203891,3px 4px 1px #3852b1,5px 4px 1px #203891,4px 5px 1px #3852b1,6px 5px 1px #203891;
}
.spicy-blue:active{
box-shadow:1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891;
}
.spicy-blue:hover{
background: #3d57b4;
}
 .spicy-black{
background: #40454d;
box-shadow: 1px 0px 1px #000,0px 1px 1px #404542,2px 1px 1px #000,1px 2px 1px #404552,3px 2px 1px #000,2px 3px 1px #404542,4px 3px 1px #000,3px 4px 1px #404542,5px 4px 1px #000,4px 5px 1px #404542,6px 5px 1px #000;
}
.spicy-black:active{
box-shadow:1px 0px 1px #000,0px 1px 1px #404542,2px 1px 1px #000,1px 2px 1px #404542,3px 2px 1px #000;
}
.spicy-black:hover{
background: #404542;
}
.spicy-purple{
background: #808095;
box-shadow: 1px 0px 1px #000,0px 1px 1px #404542,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #000,2px 3px 1px #404542,4px 3px 1px #000,3px 4px 1px #404542,5px 4px 1px #000,4px 5px 1px #404542,6px 5px 1px #000;
}
.spicy-purple:active{
box-shadow:1px 0px 1px #000,0px 1px 1px #404542,2px 1px 1px #000,1px 2px 1px #404542,3px 2px 1px #000;
}
.spicy-purple:hover{
background: #808099;
}
  • Click on Preview button to check for if their are some errors. If you don't find any errors than save your template by clicking Orange Save Template button.
We have now finished adding the required CSS codes in your Blogger Template. Now follow the steps shown below to use those buttons on your post.
  • Create a new post or edit the existing one.
  • Now switch to HTML mode by clicking the HTML button which is in the left corner of your post editor.
  • After switching to HTML mode, add the following HTML link code anywhere in your HTML section of your post.
<a class="spicy-black spicy small" href="#">Click It</a>
  • Replace # from the above link code with the link on which you want to make the button to appear. You can Replace Click It! with the text which you want to show on your button.
You can choose from three different color options. Now first see the HTML link code below to understand it.
<a class="spicy-black spicy small" href="#">Click It</a>

If you want a grayish or black color button than replace the text highlighted in red with spicy-black. If you like the purple colored button than replace the red colored text with spicy-purple. Now, if you want the blue colored button than replace the text highlighted in red with spicy-blue. You can also choose from three different sizes. Just replace small from the above link with medium, large or small.
If you want to use this button on your input tags than use the following code.
<input type="button" class="spicy-black spicy small" value="Click It!"/>
You can use these buttons on any type of clickable area. Just keep the class for these buttons in your mind. You can clearly see the class for these button are spicy-black spicy small. You can place class as class="spicy-black spicy small" in the HTML link.

That's All! I hope you liked these CSS buttons for Links and Input boxes. Keep visiting for more Design Tweaks. If you need help than drop a comment below.
Labels:

Comments

  1. Unknown20 May 2014 at 22:43

    Which template do you use

    ReplyDelete
    Replies
    1. Ashish K21 May 2014 at 00:38

      Its a WordPress template. After making it fully compatible and stable with Blogger, I will share this template on my post. It may take a while as I am busy in some other things.

      Delete

Post a Comment

Popular posts from this blog

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...
2 comments
Read more

How to Watch Any TV Show or Movie on Kodi

Kodi is a cross-platform media center solution developed by XBMC/Kodi Foundation, a non-profit technology association. Kodi which was previously known as XBMC has been growing rapidly from last few years. While the application offers to play local media files, but, it has plethora of third party add-ons, which, we can use to increase it's usefulness. In this post, you'll learn the process to install Indigo and Exodus on Kodi 18 (64-bit). The process is similar on version 17 of this app, however, I haven't checked the previous versions. Note : Streaming copyrighted content is illegal, nevertheless, it's completely legal to use Kodi for viewing the content you've purchased. First, we'll need to add Indigo Installer. Follow the following steps to know how to do it: Open Kodi . Click on the Gear button (settings). Select File Manager . Double Click on Add Source . Click on <None> ... ...type  http://fusion.tvaddons.ag and...
Post a Comment
Read more

Top 5 Alternatives to Extratorrent

In an unforeseen move, Extratorrent decided to shut down few months ago. It was one of the most popular torrent site, but now users who visit it's homepage are greeted with a message which clearly states they are not going to return in the future. Now that they are gone, various clone sites such as extratorrent.cd has been setup to squeeze money from the confused visitors via its advertisements. People visiting these clone sites should know that the original ExtraTorrent owners have deleted all data, and none of the impostors have access to the old ExtraTorrent files. There are many alternatives out there. You just need to look at the right place. Take a look at the following original torrent sites which might entice you. 1337x.to 1337x is probably the best designed torrent site you'll ever come across. Although it lacks the ExtraTorrents' rating system, nonetheless, most of the contents are verified by moderators. The site has easy-to-navigate subsections whic...
Post a Comment
Read more