Scurtă descriere


Site-ul artweber oferă resurse pentru PhotoShop cum ar fi psd-uri ( Bannere , Logo , Avatare , și coperte pentru Facebook , YouTube ) Iar pentru a-ți realiza propriile creații oferim resurse PhotoShop ( Font-uri , Gradient-uri , Wallpapere , Stil-uri și multe altele ) și pentru site-uri oferim diferite Script-uri , Index-uri.

1617
Resurse
1541
Utilizatori
73
Comentarii
4
Ani online

Forumul ArtWeber Cerere Lucrare Inregistreaza-te Resurse Premium Cum să Downloadez
Meniu
5 Resurse întâmplătoare
    423

    PSD - Banner..

    916

    Gradients -..

    4365

    INDEX - SAMP BY..

    323

    PSD - Banner..

    313

    Index - LeagueCs..

Tutoriale
    598

    Modificați culoarea barei de adrese din browserul Google Chrome Mobil

    987

    Cum se instaleaza noi Pensule in Photoshop

    695

    2 variante de buton Back to top

    1232

    Cum se instaleaza noi stiluri in Photoshop

    176

    Cum sa-ti protejezi siteul anti-copiere

Iti place ceea ce facem
Da
Nu
Nu-ma intereseaza
Parteneri
Rețele sociale

Cine este conectat

7 vizitatori pe site. dintre ei:
Oaspeți7
Lista utilizatorilor
ViperX A fost online 34 minute în urmă
Gregory A fost online 52 minute în urmă

Premium
Fii și tu mai deosebit

0

BUTONURI CU GRADIENT ȘI UMBRE ÎN CSS

Gregory Web Master » HTML & CSS
BUTONURI CU GRADIENT ȘI UMBRE ÎN CSS


Sunt nişte butoane cu un stil foarte frumos, un gradient şi umbră.
Deci, adăugați acestea butoane la colecția dvs. acestea butoane vor prinde bine în viitorul apropriat.

HTML

<button class="button1">Tipul butonului 1</button> 
<button class="button2">Tipul butonului 2</button> 
<button class="button3">Tipul butonului 3</button> 
<button class="button4">Tipul butonului 4</button>


CSS

button { 
  margin: 2em auto; 
  display: block; 
  -webkit-appearance: none; 
  border: 6px solid rgba(255, 255, 255, 0.45); 
  border-radius: 50px; 
  padding: 1em 3em; 
  background-repeat: no-repeat; 
  background-size: 100%; 
  background-clip: padding-box; 
  position: relative; 
  color: #FFF; 
  cursor: pointer; 
  } 
   
  button:before { 
  content: ""; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 5px; 
  left: 5px; 
  border-radius: 50px; 
  z-index: -1; 
  filter: blur(14px); 
  } 
   
  button:after { 
  content: ""; 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 5px; 
  right: 5px; 
  border-radius: 50px; 
  z-index: -1; 
  filter: blur(14px); 
  } 
   
  .button1 { 
  background-image: linear-gradient(90deg, #7b81ec, #3bd1d3); 
  } 
   
  .button1:before { 
  background-image: linear-gradient(90deg, #7b81ec, transparent); 
  } 
   
  .button1:after { 
  background-image: linear-gradient(90deg, transparent, #3bd1d3); 
  } 
   
  .button2 { 
  background-image: linear-gradient(90deg, #fa80d2, #fed757); 
  } 
   
  .button2:before { 
  background-image: linear-gradient(90deg, #fa80d2, transparent); 
  } 
   
  .button2:after { 
  background-image: linear-gradient(90deg, transparent, #fed757); 
  } 
   
  .button3 { 
  background-image: linear-gradient(90deg, #8ce0f1, #79f391); 
  } 
   
  .button3:before { 
  background-image: linear-gradient(90deg, #8ce0f1, transparent); 
  } 
   
  .button3:after { 
  background-image: linear-gradient(90deg, transparent, #79f391); 
  } 
   
  .button4 { 
  background-image: linear-gradient(90deg, #525a69, #898dda); 
  } 
   
  .button4:before { 
  background-image: linear-gradient(90deg, #525a69, transparent); 
  } 
   
  .button4:after { 
  background-image: linear-gradient(90deg, transparent, #898dda); 
  }

Link direct:
BB-code link:
HTML link:

Atenție!
Acest material a fost furnizat de artweber.ro doar în scop informativ. Administrația nu este responsabilă pentru conținutul acesteia
Dacă dețineți drepturile de autor la acest material/resursa contactați imediat un administrator.
BUTONURI, Gradient, css, umbre
Stimate vizitator, esti pe site ca utilizator neînregistrat.
Vă recomandăm să vă Înregistrați.
informație
Ai vrea sa lasi un comentariu? Conectați-vă la contul dvs. pentru a lăsa comentarii. Nu ai cont? Aveți posibilitatea să creați un cont gratuit acum.