Vienkāršas pogas dažādās krāsās

Lappuse 1 no 1
1

uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » CMS, CSS, HTML, JAVASCRIPT, PHP, XML » Pamācības » Vienkāršas pogas dažādās krāsās

wuxmachine

Trešdiena, 10.04.2013, 12:21:32 | Ieraksts #1

VECĀ MIESA

Foruma ieraksti: 930

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:

@wuxmachine raksta .. :

Pavisam vienkāršas CSS stilizētas pogas, kuras reizēm var noderēt kā vienkāršs, bet tajā pašā laikā elegants dizaina elements.

Šos te ievietojam @ CSS, vai arī jebkurā HTML rediģēšanas lapā ieliekot tagos attiecīgi sākumā priekšā pieliekam tagu < style> un beigās < /style> - BEZ atstarpēm!

Zila poga:

Code

/* ZILA POGA /- BUZZ | UCOZWEBMEISTARS
------------------------------------------*/
.button_blue {
   cursor:pointer;
   padding: 7px 15px!important;
   border:1px solid #1c73a4!important;

   font:11px Verdana,Arial,Helvetica, sans-serif!important;
   text-shadow:1px 1px 1px #166693!important;
   font-weight: 700!important;
   color:#fff!important;

   background: #64b0db!important;
   border-radius:3px;
}

.button_blue:active {box-shadow:inset 0px 0px 3px #166693!important;}

     .button_blue:hover {background:#51a4d2!important;}

Zaļa poga:

Code

/* ZAĻA POGA /- BUZZ | UCOZWEBMEISTARS
------------------------------------------*/
.button_green {
   cursor:pointer;
   padding: 7px 15px!important;
   border:1px solid #33a41c!important;

   font:11px Verdana,Arial,Helvetica, sans-serif!important;
   text-shadow:1px 1px 1px #258b10!important;
   font-weight: 700!important;
   color:#fff!important;

   background: #78db64!important;
   border-radius:3px;
}

.button_green:active {box-shadow:inset 0px 0px 3px #23880e!important;}

     .button_green:hover {background:#6cca59!important;}

Sarkana poga:

Code

/* SARKANA POGA /- BUZZ | UCOZWEBMEISTARS
------------------------------------------*/
.button_red {
   cursor:pointer;
   padding: 7px 15px!important;
   border:1px solid #af080b!important;

   font:11px Verdana,Arial,Helvetica, sans-serif!important;
   text-shadow:1px 1px 1px #8e0104!important;
   font-weight: 700!important;
   color:#fff!important;

   background: #f25c61!important;
   border-radius:3px;
}

.button_red:active {box-shadow:inset 0px 0px 3px #8e0104!important;}

.button_red:hover {background:#ee353a!important;}

Oranža poga:

Code

/* ORANŽA POGA /- BUZZ | UCOZWEBMEISTARS
------------------------------------------*/
.button_orange {
   cursor:pointer;
   padding: 7px 15px!important;
   border:1px solid #d18816!important;

   font:11px Verdana,Arial,Helvetica, sans-serif!important;
   text-shadow:1px 1px 1px #b87813!important;
   font-weight: 700!important;
   color:#fff!important;

   background: #f5ad3d!important;
   border-radius:3px;
}

.button_orange:active {box-shadow:inset 0px 0px 3px #975c00!important;}

.button_orange:hover {background:#eda330!important;}

Violeta poga:

Code

/* VIOLETA POGA /- BUZZ | UCOZWEBMEISTARS
------------------------------------------*/
.button_lilac {
   cursor:pointer;
   padding: 7px 15px!important;
   border:1px solid #a41ca2!important;

   font:11px Verdana,Arial,Helvetica, sans-serif!important;
   text-shadow:1px 1px 1px #8a1388!important;
   font-weight: 700!important;
   color:#fff!important;

   background: #db64d9!important;
   border-radius:3px;
}

.button_lilac:active {box-shadow:inset 0px 0px 3px #820980!important;}

.button_lilac:hover {background:#c754c5!important;}

Gaiši zila poga:

Code

/* GAIŠI ZILA POGA /- BUZZ | UCOZWEBMEISTARS
------------------------------------------*/
.button_turquoise {
   cursor:pointer;
   padding: 7px 15px!important;
   border:1px solid #1ca48a!important;

   font:11px Verdana,Arial,Helvetica, sans-serif!important;
   text-shadow:1px 1px 1px #0e8770!important;
   font-weight: 700!important;
   color:#fff!important;

   background: #64dbc4!important;
   border-radius:3px;
}

.button_turquoise:active {box-shadow:inset 0px 0px 3px #0e8770!important;}

.button_turquoise:hover {background:#53c5af!important;}

Pelēka poga:

Code

/* PELĒKA POGA /- BUZZ | UCOZWEBMEISTARS
------------------------------------------*/
.button_dark {
   cursor:pointer;
   padding: 7px 15px!important;
   border:1px solid #606060!important;

   font:11px Verdana,Arial,Helvetica, sans-serif!important;
   text-shadow:1px 1px 1px #606060!important;
   font-weight: 700!important;
   color:#fff!important;

   background: #9f9f9f!important;
   border-radius:3px;
}

.button_dark:active {box-shadow:inset 0px 0px 3px #555!important;}

.button_dark:hover {background:#888!important;}

Lai ievietotu kādu no šīm pogām html lapā, tad kods būs šāds:

Code

<input class="POGASKLASE, piem. "button_dark" type="submit" value="BUZZ.UCOZ.LV">
piemērs:
<input class="button_dark" type="submit" value="UCOZWEBMEISTARS">

p.s. Pogas izmēri automātiski pielāgosies teksta garumam.

Pielikumi: 2524406.png (11.1 Kb)

BAM BAM BAM

Dalarans

Ceturtdiena, 11.04.2013, 8:51:26 | Ieraksts #2

PRASTS BIEDRS

Foruma ieraksti: 31

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:
Lietotājs nav saņēmis apbalvojumus

@Dalarans raksta .. :

Kurs šīs pogas parādīsies ?

Paraksta nav

Korijs

Piektdiena, 12.04.2013, 3:49:15 | Ieraksts #3

FORUMA DIKTATORS

Foruma ieraksti: 5047

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:

@Korijs raksta .. :

Quote (Dalarans)

Kurs šīs pogas parādīsies ?

tur, kur ievietosi HTML kodu saturā..

Code

<input class="POGASKLASE, piem. "button_dark" type="submit" value="BUZZ.UCOZ.LV">
piemērs:
<input class="button_dark" type="submit" value="UCOZWEBMEISTARS">

Proti uzvesties, pateikt paldies un paaugstināt reputāciju tiem, kuri ir to nopelnījuši, palīdzēt tiem, kuriem ir nepieciešama palīdzība, papildināt forumu ar lietderīgām tēmām, līdz ar ko Tu šeit būsi respektabls biedrs! Pretēji tam, ja izteikts stulbums, nekaunība un neadekvāta uzvedība spraucas pāri katrai smadzeņu rievai, ja tāda ir - lūgtum, tiksi nahrenizēts! - Biedrs mācās no biedra / UWM