Buton Pulse Buton 3D-Umbra Buton Rotunjit Stanga Buton Rotunjit Dreapta Buton Inima-Sageata
Butoane cu CSS, create numai cu proprietati CSS / CSS3, fara a folosi fisier cu imagine.

Buton Simplu

<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="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> 
<a href="https://marplo.net/css" title="Curs CSS" class="buttons">Curs CSS</a>
Rezultat:
www.CoursesWeb.net Curs CSS

Buton 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="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> 
<a href="https://marplo.net/ajax" title="Curs Ajax" class="buttons">Curs Ajax</a>
Rezultat:
www.CoursesWeb.net   Curs Ajax

Buton 3D-Umbra

<style type="text/css">
/* https://marplo.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="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> 
<a href="https://marplo.net/css" title="Curs CSS" class="buttons">Curs CSS</a>
Rezultat:
www.CoursesWeb.net Curs CSS

Buton Rotunjit Stanga

<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://marplo.net/html" title="Curs HTML" class="buttons">Curs HTML</a> 
<a href="https://marplo.net/css" title="Curs CSS" class="buttons">Curs CSS</a>
Rezultat:
Curs HTML Curs CSS

Buton Rotunjit Dreapta

<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://marplo.net/html" title="Curs HTML" class="buttons">Curs HTML</a> 
<a href="https://marplo.net/css" title="Curs CSS" class="buttons">Curs CSS</a>
Rezultat:
Curs HTML Curs CSS

Buton Inima-Sageata

<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="Cursuri Jocuri Anime" class="buttons">MarPlo.net</a> 
<a href="https://coursesweb.net/javascript/" title="JavaScript Courses" class="buttons">JavaScript Course</a>
Rezultat:
MarPlo.net JavaScript Course

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Butoane cu CSS

Last accessed pages

  1. Zilele saptamanii - Lunile anului - Anotimpurile - Engleza (10611)
  2. Verbe frazale din limba Engleza (15272)
  3. Jokes - Glume, Bancuri, Humor (3661)
  4. Zilele saptamanii, Lunile si Anotimpuri - Exercitii incepatori (3195)
  5. Proverbe, expresii si zicatori (5908)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3644)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (3243)
  3. Gramatica limbii engleze - Prezentare Generala (2719)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (2361)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1955)