Creating Simple Buttons with CSS and HTML

In this article, I'll teach you how to create a simple button using html and css.
First part: Type in the html code below into your text editor, save as button.html

<link rel="stylesheet" type="text/css" href="button.css">
<a href="#" class="button green">button</a>
<a href="#" class="button blue">button</a>
<a href="#" class="button gray">button</a>

Second part: Type in the css code below into your text editor, save as button.css

 .button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;

    text-shadow: 1px 1px 1px rgba(255,255,255, .22);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.green {
    color: #3e5706;
    background: #a5cd4e;
}
/* Blue color */
.blue {
    color: #19667d;
    background: #70c9e3;
}
/* Gray Color */
.gray {
    color: #515151;
    background: #d3d3d3;
}

When you open the button.html file in your web browser, you should get buttons similar to the ones below:

 Image Credits:  http://bhtdownloads.com, +BThemesandTricks 
 

Posted By Unknown1:20:00 am

1

Continue Reading

Create Eye-Catching CSS Buttons

Create Eye-Catching CSS Buttons

Hello, it's been a while since I last blogged. Today, I'll be sharing with you on how to design smart looking, clean cut, CSS buttons as a link to your social networking site such as Twitter, Facebook, Youtube, et cetera.
To create a smart looking like the one below, we'll use HTML and CSS.

Follow these steps:

• Copy the following html code

<link type="text/css" rel="stylesheet" href="link to css file">
<div id='wrapper'>
          <div class='cool_btn1 green'>
                <h1 class='top'>126 <i>Plays</i></h1>
                <h2>H</h2>
            </div>
            <div class='cool_btn1 teal'>
                <h1 class='top'>10k <i>Likes</i></h1>
                <h2>U</h2>
            </div>
            <div class='cool_btn1 blue'>
                <h1 class='top'>240 <i>Likes</i></h1>
                <h2>G</h2>
            </div>
            <div class='cool_btn1 orange'>
                <h1 class='top'>21k <i>Points</i></h1>
                <h2>)</h2>
            </div>
        </div>    

• Copy the following CSS Code
• @import url('http://fonts.googleapis.com/css?family=Lobster');
  @font-face {
    font-family: 'ModernPictogramsNormal';
    src: url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.eot");
    src: url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.woff") format("woff"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.ttf") format("truetype"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.svg#ModernPictogramsNormal") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  
  /* line 13, ../sass/screen.scss */
  body {
    background: url("http://www.vancouverad.com/bgimg/img/noise_pattern_with_crosslines.png") repeat;
    font-family: helvetica, arial, sans-serif;
  }
  
  /* line 17, ../sass/screen.scss */
  #wrapper {
    width: 900px;
    margin: 10px auto 0 auto;
  }
  
  /* line 22, ../sass/screen.scss */
  .cool_btn1 {
    width: 190px;
    height: 190px;
    margin: 15px 15px 15px 15px;
    position: relative;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    -ms-border-radius: 200px;
    -o-border-radius: 200px;
    border-radius: 200px;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(50%, #e3e3e3), color-stop(50%, #888888), color-stop(100%, #666666));
    background-image: -webkit-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666);
    background-image: -moz-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666);
    background-image: -o-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666);
    background-image: linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
  }
  /* line 31, ../sass/screen.scss */
  .cool_btn1 h1 {
    text-align: center;
    font-size: 50px;
    margin: 20px 0 0 0;
    color: #333;
    text-shadow: 0 1px 0 white, 0 -1px 0 rgba(0, 0, 0, 0.5);
    font-family: 'Lobster', cursive;
    font-weight: normal;
    line-height: 1;
  }
  /* line 40, ../sass/screen.scss */
  .cool_btn1 h1 i {
    display: block;
    font-style: normal;
    font-size: 14px;
    font-weight: bold;
    font-family: helvetica, arial, sans-serif;
    text-shadow: none;
  }
  /* line 49, ../sass/screen.scss */
  .cool_btn1 h2 {
    font-family: 'ModernPictogramsNormal', Arial, sans-serif;
    font-weight: normal;
    text-align: center;
    font-size: 90px;
    line-height: 1;
    margin: 15px 0 0 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0px rgba(0, 0, 0, 0.8);
    color: #fafafa;
  }
  
  /* line 60, ../sass/screen.scss */
  .cool_btn1:after {
    content: "";
    width: 200px;
    height: 200px;
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: -1;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    -ms-border-radius: 200px;
    -o-border-radius: 200px;
    border-radius: 200px;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cecece), color-stop(100%, #e7e7e7));
    background-image: -webkit-linear-gradient(#cecece, #e7e7e7);
    background-image: -moz-linear-gradient(#cecece, #e7e7e7);
    background-image: -o-linear-gradient(#cecece, #e7e7e7);
    background-image: linear-gradient(#cecece, #e7e7e7);
     -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);
    -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);
  }
  
  /* -------------------
  Transitions
  -------------------- */
  /* line 76, ../sass/screen.scss */
  .cool_btn1.blue, .cool_btn1.teal, .cool_btn1.orange, .cool_btn1.green {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
  }
  
  /* -------------------
  Colors
  -------------------- */
  /* line 84, ../sass/screen.scss */
  .cool_btn1.blue {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #577fbd), color-stop(100%, #274281));
    background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281);
    background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281);
    background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281);
    background-image: linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281);
  }
  /* line 86, ../sass/screen.scss */
  .cool_btn1.blue h1 {
    color: #4265A3;
  }
  /* line 89, ../sass/screen.scss */
  .cool_btn1.blue h2 {
    color: #1E3261;
  }
  
  /* line 93, ../sass/screen.scss */
  .cool_btn1.teal {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #11b8fe), color-stop(100%, #0187b8));
    background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8);
    background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8);
    background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8);
    background-image: linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8);
  }
  /* line 95, ../sass/screen.scss */
  .cool_btn1.teal h1 {
    color: #149EDB;
  }
  /* line 98, ../sass/screen.scss */
  .cool_btn1.teal h2 {
    color: #0C6186;
  }
  
  /* line 102, ../sass/screen.scss */
  .cool_btn1.orange {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #f49e23), color-stop(100%, #e27619));
    background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619);
    background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619);
    background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619);
    background-image: linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619);
  }
  /* line 104, ../sass/screen.scss */
  .cool_btn1.orange h1 {
    color: #e27619;
  }
  /* line 107, ../sass/screen.scss */
  .cool_btn1.orange h2 {
    color: #AC5509;
  }
  
  /* line 111, ../sass/screen.scss */
  .cool_btn1.green {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #2fd51d), color-stop(100%, #00a01e));
    background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e);
    background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e);
    background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e);
    background-image: linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e);
  }
  /* line 113, ../sass/screen.scss */
  .cool_btn1.green h1 {
    color: #00a01e;
  }
  /* line 116, ../sass/screen.scss */
  .cool_btn1.green h2 {
    color: #006312;
  }
  
  /* -------------------
  Hover States
  -------------------- */
  /* line 123, ../sass/screen.scss */
  .cool_btn1.orange:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8);
  }
  
  /* line 128, ../sass/screen.scss */
  .cool_btn1.teal:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8);
  }
  
  /* line 133, ../sass/screen.scss */
  .cool_btn1.blue:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8);
  }
  
  /* line 138, ../sass/screen.scss */
  .cool_btn1.green:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8);
  }
  
  /* -------------------
  Media Queries
  -------------------- */
  @media screen and (max-width: 860px) {
    /* line 147, ../sass/screen.scss */
    #wrapper {
      width: 700px;
    }
  }
  @media screen and (max-width: 740px) {
    /* line 152, ../sass/screen.scss */
    #wrapper {
      width: 480px;
    }
  }
  @media screen and (max-width: 440px) {
    /* line 157, ../sass/screen.scss */
    #wrapper {
      width: 370px;
      text-align: center;
    }
  }
• Apply them to your site and you are good to go!
   

Credit goes to Mr Jim Rush. 

Posted By Unknown4:58:00 pm

4

Continue Reading

Incorporating CSS to HTML

 

Incorporating CSS to HTML

Hello friends, today I'll teach some basic skills needed in order to code web pages from scratch to finish. By now, you already know that HTML (Hypertext Markup Language) is the language of the web without which you won't be able to create web pages. With HTML you can code the structure but that's how far you can go with HTML. In the past, HTML had tags that where specifically for the presentation and designs of the web page. But now, things has changed, the specifications has changed. Now, a different markup language is used specifically to style html pages. That language is called CSS, Cascading Style Sheets. With CSS, you can dynamically style and design web pages in a way that captivates the eye. Today we will show you how to incorporate CSS markup with your html code.

Steps to follow

• Type in the html code below:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

4. <head>
5.    <link type="text/css" rel="stylesheet" href="cssfile.css" />
6.   <title>My first Web Page</title>
7.  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
8.  </head>

9. <body>
   
10. </body>

11. </html> 
Look at the code closely. It is written in xhtml (that is, eXtensible hypertext markup language). Notice that the code is number from 1 to 11. Numbering as such is not included in html, we put it there for easy reference to specific tags (<>) in the codes. In html, codes are marked up using tags. Tags begin with an open angle bracket like this <> and a closing tag with an angle bracket like this </ >. 
For example, to add emphasis to a text, use the <em> tag to wrap around the text. 

• <em>This text has been displayed with emphasis</em>

If you save the html code above with a .html extension, it'll appear as an internet file on clicking on it, your default browser will open up with the web page.
That's that about that! Let's move on to CSS, that's our focus. Like I said earlier, CSS is used in styling web pages and can be used along side JavaScript and Ajax to add some added functionality to a website.
From number 5 in the code above, the link tag has three attributes, that is, the type, rel, href.
The type attribute of the link tag suggests that the tag is linking to a css file, thus the browser is alerted about that. Next the rel attribute shows that the link attribute is linking to a style sheet. While the href attribute points to the source of the css file (that is, where the css markup code is located) -- this could be an absolute link or a relative path.
Let's get down to business. On the lines below, we will show you some basic CSS
CSS codes are called rules.

CSS RULES

body { background-color: red;
             font-family: Georgia;
             border-bottom: 2px dotted gray;
}
p { background-color: yellow;
      font-family: sans-serif;
} 
If you typed the css rule above into a text editor, save it as whatever.css . All external css source files must be saved with a .css extension to show it is a CSS file.
This is all we can show you for today, watch out for up coming well detailed tutorials on html and CSS.


Image Credit: Icon Archive

Posted By Unknown11:32:00 pm

3

Continue Reading

How to Add Back to Top Button on your Blogger Blog

How to Add Back to Top Button on your Blogger Blog

In this tutorial, we will show you a smart way of including a back-to-top button in your blog. The Button will look something like the one below:

The button allows you to move automatically to the top of the blog page once you have scrolled down the page.
Follow these steps outlined below in order to activate this feature.

• Copy and Paste the code below:

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; left: 5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPNu_Y1vt04wr3k00K98yCLsfledUmQDj_XYZWzFyUPeJpU6IaAaG9wu0wLfykr6Rc5C-gCoNiRqpil3oDTz7u5XCRAj5YXs6nEgqLeiEq3wIdSqa5Fkn-cf1CU5iAjn-aAq-hol1kVZM/h120/back-to-top+button.png" /></a>

•  Change the image address in red to your favorite back-top-button image, you can search for pre-create buttons on Google.

 

 

Posted By Unknown3:36:00 pm

4

Continue Reading

Menu Building with Dynamic Hypertext Markup Language

Depending on the type of menus you're going to build, certain preparations need to be made to your web site. DHTML Menu Builder can be used to create a toolbar, or you can create menus which appear using elements that already exist on your web pages. If you're going to use a toolbar created by DHTML Menu Builder, there's no need to do any additional preparations to the pages on your web site and you may continue to the next section:
 Project Properties
Using your own text and graphics
One of the most unique features of DHTML Menu Builder is the ability to attach menus to text or graphics which you have already placed in your web pages. This feature lets you build your own custom toolbar using your favorite image editing program, and then have the menus react when the user activates an element from your toolbar. It is important to understand that the toolbar is the only element of a menu that is always visible to the user and its design should be consistent with the general layout and design of your web site. When using your own toolbar, you need to set up each hotspot in a special way so than DHTML Menu
Builder can later attach the menu groups to them. This setup is known as converting the hotspots into
null hyperlinks.
Converting your hotspots into null hyperlinks
A hotspot can be an image or just some text. To convert your hotspot into a null hyperlink, simply create a hyperlink on that element and make it point to itself; this is done by using a hash (or pound sign) character "#" as the target of the link.
Let's say this is one of the images you're going to use to display a menu.

The HTML code of the image looks like this:
<img border="0" src="images/sample_image.gif" align="middle" width="50" height="33">
After converting the image into a null hyperlink the code looks like this:
<a href="#"><img border="0" src="images/sample_image.gif" align="middle" width="50"
height="33" name="MyImage"></a>
 As you can see, by moving the mouse over the converted image, your mouse changes into a  hand indicating that the image is a link. Highlighted in dark red you can see the code that converted the image into a null hyperlink. Also note that we have added a new setting, name, to the image's code. The namesetting will allow DHTML Menu Builder identify the image and perform automatic alignment of the menus. You should give each image-based hotspot a unique name so DHTML Menu Builder can identify it.
This is all the preparation that needs to be done, so when you are ready to implement your menus into the page that contains the toolbar, everything will be ready to use the HotSpots Editor and automatically make your hotspots active and responsive to users' actions.

Posted By Unknown8:38:00 pm

2

Continue Reading

Dynamic Hypertext Markup Language {DHTML} : Creating Menus with DHTML

 

It has been proven that the easiest way to navigate the different options of any interface is through the use of menus. Operating systems and most software use menus to allow the user to navigate and find his way around. So... why shouldn't your web site use menus, too? DHTML Menu Builder not only creates menus, it creates beautiful menus  composed of thousands of lines of code compatible with all the major browsers
and platforms. But don't worry, you don't have to know anything about the  code that DHTML Menu Builder produces. You can just concentrate on using it  to spice up your navigation system. Let DHTML Menu Builder do the hard work! From plain, text-based menus to complex graphical menus loaded with the
latest DHTML and CSS standards, DHTML Menu Builder can deliver professional-looking menus that work and feel as if you were using some program on your  computer.
DHTML Menu Builder's feature-rich options will let you build a navigation  system just the way you want it. With support for any kind of web site configuration–including sites that use frames, sites that use pre-processor  languages (such as ASP or PHP), and sites built with any HTML authoring  application, DHTML Menu Builder is the ultimate site navigation solution. Did we mention that the menus look cool? The menus created by DHTML Menu  Builder can be highly customized so that the user will not even notice that the navigation system is made up of standard HTML elements!

Posted By Unknown3:29:00 pm

1

Continue Reading