Curs Css

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 adauga rand nou in paragraf?
<b> <br> <p>
Prima linie ...<br>
Alta linie...
Ce proprietate CSS seteaza spatiu dintre litere?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
Ce functie obtine accesul la un element HTML cu un anumit ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Clic pe instructiunea "echo" utilizata corect.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Adresa URL: http://CoursesWeb.net";
Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?
will paint not paint have painted
She does not paint that landscape.
- Ea nu picteaza acel peisaj.
Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?
ir a cantar cantaba no cantar
Ella no canta esa canción.
- Ea nu canta acel cantec.
Butoane cu CSS

Last accessed pages

  1. Pronumele in limba engleza - Pronouns (53938)
  2. Mailer - Script PHP trimitere date prin e-mail (703)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (269999)
  4. Adjective - Exercitii si teste engleza incepatori (16881)
  5. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (66768)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1038)
  2. Gramatica limbii engleze - Prezentare Generala (654)
  3. Exercitii engleza - English Tests and exercises - Grammar (594)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (475)
  5. Coduri pt culori (396)