Css Course

  • Button Pulse                    • Button 3D-Shadow
  • Button Rounded Left       • Button Rounded Right
  • Button Heart-Arrow

Buttons with CSS, created only with CSS / CSS3 properties, without using image file.

Button Simple

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 text-decoration: none;
 color: #00f;
}

.buttons:hover {
 background-color: #BBB;
 background-image: -webkit-linear-gradient(top, #DDD, #AAA);
 background-image: -moz-linear-gradient(top, #DDD, #AAA);
 background-image: -o-linear-gradient(top, #DDD, #AAA);
 background-image: linear-gradient(top, #DDD, #AAA);
 color: yellow;
}

.buttons:active { background: #CCC; }
</style>

<a href="https://coursesweb.net" title="Courses Programming Development" class="buttons">https://CoursesWeb.net</a> 
<a href="https://coursesweb.net/css/" title="CSS Courses" class="buttons">CSS Courses</a>
Demo:
https://CoursesWeb.net CSS Courses

Button Pulse

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 text-decoration: none;
 color: #00f;
 -webkit-animation: "pulse" 1s ease-in-out 0 infinite alternate;
 -moz-animation: "pulse" 1s ease-in-out 0 infinite alternate;
 animation: "pulse" 1s ease-in-out 0 infinite alternate;
 box-shadow: 0px 0px 4px #00ACE6;
}

@-webkit-keyframes pulse {
 0% { box-shadow: 0px 0px 4px #00ACE6; }
 100% { box-shadow: 0px 0px 12px #00ACE6; }
}

@-moz-keyframes pulse {
 0% { box-shadow: 0px 0px 4px #00ACE6; }
 100% { box-shadow: 0px 0px 12px #00ACE6; }
}

@keyframes pulse {
 0% { box-shadow: 0px 0px 4px #00ACE6; }
 100% { box-shadow: 0px 0px 12px #00ACE6; }
}

.buttons:hover {
 background-color: #BBB;
 background-image: -webkit-linear-gradient(top, #DDD, #AAA);
 background-image: -moz-linear-gradient(top, #DDD, #AAA);
 background-image: -o-linear-gradient(top, #DDD, #AAA);
 background-image: linear-gradient(top, #DDD, #AAA);
 'box-shadow: 0px 0px 4px #0001E6;'
 color: yellow;
}

.buttons:active { background: #CCC; }
</style>

<a href="https://coursesweb.net" title="Courses Programming Development" class="buttons">https://CoursesWeb.net</a> 
<a href="https://coursesweb.net/ajax/" title="Ajax Courses" class="buttons">Ajax Course</a>
Demo:
https://CoursesWeb.net   Ajax Course

Button 3D-Shadow

<style type="text/css">
/* https://coursesweb.net/css/ */
.buttons {
 -moz-text-blink: none;
 -moz-text-decoration-color: -moz-use-text-color;
 -moz-text-decoration-line: none;
 -moz-text-decoration-style: solid;
 background-color: #FEFEFE;
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 box-shadow: 2px 3px 4px #6789DA inset;
 color: red;
 margin-bottom: 1px;
 margin-left: 5px;
 margin-right: 5px;
 margin-top: 1px;
 padding-bottom: 2px;
 padding-left: 8px;
 padding-right: 8px;
 padding-top: 2px;
}
.buttons:hover {
 -moz-text-blink: none;
 -moz-text-decoration-color: -moz-use-text-color;
 -moz-text-decoration-line: underline;
 -moz-text-decoration-style: solid;
 background-attachment: scroll;
 background-clip: border-box;
 background-color: yellow;
 background-image: none;
 background-origin: padding-box;
 background-position: 0 0;
 background-repeat: repeat;
 background-size: auto auto;
 box-shadow: 2px 3px 4px #A0A0DA;
 color: #0408FE;
}
</style>

<a href="https://coursesweb.net" title="Courses Programming Development" class="buttons">https://CoursesWeb.net</a> 
<a href="https://coursesweb.net/css/" title="CSS Courses" class="buttons">CSS Courses</a>
Demo:
https://CoursesWeb.net CSS Courses

Button Rounded Left

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 background-color: #007EBD;
 background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
 background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
 background-image: -o-linear-gradient(top, #00A0F0, #007EBD);
 background-image: linear-gradient(top, #00A0F0, #007EBD);
 border-color: #0000CC;
 color: #FFF;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
 margin-right: 0;
 border-right-width: 0;
}

.buttons:hover {
 background-color: #08aded;
 background-image: -webkit-linear-gradient(top, #00A0F0, #08aded);
 background-image: -moz-linear-gradient(top, #00A0F0, #08aded);
 background-image: -o-linear-gradient(top, #00A0F0, #08aded);
 background-image: linear-gradient(top, #00A0F0, #08aded);
 text-decoration: none;
 color: #ff1;
}

.buttons:active { background: #007EBD; }
</style>

<a href="https://coursesweb.net/html/" title="HTML Course" class="buttons">HTML Course</a> 
<a href="https://coursesweb.net/css/" title="CSS Courses" class="buttons">CSS Course</a>
Demo:
HTML Course CSS Course

Button Rounded Right

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 background-color: #8cc99e;
 background-image: -webkit-linear-gradient(top, #66CC33, #8cc99e);
 background-image: -moz-linear-gradient(top, #66CC33, #8cc99e);
 background-image: -o-linear-gradient(top, #66CC33, #8cc99e);
 background-image: linear-gradient(top, #66CC33, #8cc99e);
 border-color: #0000CC;
 color: #FFF;
 border-top-left-radius: 0;
 border-bottom-left-radius: 0;
 margin-left: 0;
 border-left-width: 0;
}

.buttons:hover {
 background-color: #08A009;
 background-image: -webkit-linear-gradient(top, #66CC33, #08A009);
 background-image: -moz-linear-gradient(top, #66CC33, #08A009);
 background-image: -o-linear-gradient(top, #66CC33, #08A009);
 background-image: linear-gradient(top, #66CC33, #08A009);
 text-decoration: none;
 color: #ff1;
}

.buttons:active { background: #08A009; }
</style>

<a href="https://coursesweb.net/html/" title="HTML Course" class="buttons">HTML Course</a> 
<a href="https://coursesweb.net/css/" title="CSS Courses" class="buttons">CSS Course</a>
Demo:
HTML Course CSS Course

Button Heart-Arrow

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 background-color: #007EBD;
 background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
 background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
 background-image: -o-linear-gradient(top, #00A0F0, #007EBD);
 background-image: linear-gradient(top, #00A0F0, #007EBD);
 border-color: #0000CC;
 color: #FFF;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
 margin-right: 0;
 border-right-width: 0;
}

.buttons:hover {
 background-color: #08aded;
 background-image: -webkit-linear-gradient(top, #00A0F0, #08aded);
 background-image: -moz-linear-gradient(top, #00A0F0, #08aded);
 background-image: -o-linear-gradient(top, #00A0F0, #08aded);
 background-image: linear-gradient(top, #00A0F0, #08aded);
 text-decoration: none;
 color: #ff1;
}

.buttons:active { background: #5CB82E; }

.buttons:after {
 content: "\2192";
 margin-left: 5px;
}

.buttons:before {
 content: "\2665";
 margin-right: 5px;
}
</style>

<a href="https://marplo.net/" title="Course Games Anime" class="buttons">marplo.net</a> 
<a href="https://coursesweb.net/javascript/" title="JavaScript Courses" class="buttons">JavaScript Course</a>
Demo:
marplo.net JavaScript Course

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Buttons with CSS

Last accessed pages

  1. Deco Tool (2719)
  2. jQuery Drag and Drop Rows between two similar Tables (12974)
  3. Creating Custom Colors (2363)
  4. Wake Up! (15294)
  5. GraidleChart Create Graphic Charts (2008)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (526)
  2. The Mastery of Love (65)
  3. CSS cursor property - Custom Cursors (63)
  4. Read Excel file data in PHP - PhpExcelReader (59)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (44)