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
Clic pe tag-ul HTML care afiseaza o linie orizontala.
<br> <em> <hr>
Continut ...
<hr />
Alt continut sub linie ...
Care proprietate CSS defineste culoarea textului?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Clic pe functia care cauta daca un anume caracter sau text e intr-un sir.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// nu e in sir");
else alert("http:// e in sir");
Care e functia ce imparte un sir in parti de siruri intr-un array, pe baza unui separator?
array_merge() explode() implode()
$str = "mar,banana,pepene,para";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"mar", 1=>"banana", 2=>"pepene", 3=>"para")
Indicati asocierea corecta: "luna-anotimp".
April - Autumn October - Spring July - Summer
July is a beautiful summer month.
- Iulie este o frumoasa luna de vara.
Indicati asocierea corecta: "luna-anotimp".
Octubre - Primavera Julio - Verano Abril - Otoño
Julio es un hermoso mes de verano.
- Iulie este o frumoasa luna de vara.
Butoane cu CSS

Last accessed pages

  1. Comparative neregulate (1641)
  2. Definire si Utilizare Clase in JavaScript (2077)
  3. Sufixele -ful, -less si -ness - ful, less and ness suffixes (18267)
  4. Verbe frazale din limba Engleza (40623)
  5. Creare si editare pagini HTML (86416)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (525)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (492)
  3. Coduri pt culori (298)
  4. Formatare text in pagina html (173)
  5. Creare si editare pagini HTML (172)