Grupa: Viesis

UWM FORUMS · PORTFOLIO · VIETŅU TOP
JAUNĀKAIS FORUMĀ · BIEDRU SARAKSTS · INFO MEKLĒTĀJS · IZSEKOTĀS TĒMAS · NOBALSO


Ierakstus pievienot var tikai reģistrējies lietotājs!
  UWM AKTUĀLI: DISKUSIJA: Reputācijas restarts - DISKUSIJA: Steam spēļu izloze - NODERĪGI: "CW sistēma" uCoz modulī
  • Lappuse 1 no 1
  • 1
uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » WEBLAPU APLIKĀCIJAS, SKRIPTI, SPRAUDŅI » uCoz » Pogas ar CSS palidzibu, divi veidi
Pogas ar CSS palidzibu, divi veidi
Antikrists
Ceturtdiena, 22.03.2018, 2:45:00 | Ieraksts #1
FORUMA APSARGS
Foruma ieraksti: 602

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis


Jaunākie apbalvojumi:


@Antikrists raksta .. :

Liec kur vēlies redzēt

Code
<div id="mudersken">
  <div class="lomudsa_nsagevin">
    <p>Poga №1</p>
    <span class="sakilan"></span>
    <span class="lasmigem"></span>
  </div>
  
  <div class="galogtus_abunes">
    <p>Poga №2</p>
    <span class="t-slider1"></span>
    <span class="d-slider1"></span>
  </div>
</div>



CSS
Code
* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: sans-serif;
}

#mudersken {
  width: 500px;
  height: auto;
  margin: 50px auto;
}

/* first button slider css styles */

.lomudsa_nsagevin {
   width: 300px;
  height: auto;
  border: 3px solid #bb0000;
  padding: 20px;
  margin: 30px auto;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  overflow:hidden;
  cursor: pointer;
  font-size: 24px;
  color: #bb0000;
  box-sizing: border-box;
}

.lomudsa_nsagevin p {
  position: relative;
  z-index: 999;
}

.lomudsa_nsagevin:hover {
  color: #fff;
}

.lomudsa_nsagevin .sakilan {
  width: 100%;
  background-color: #bb0000;
  height: 60px;
  position: absolute;
  top: -98px;
  left: 0px;
  transform: skewY(10deg);
  transition: all 0.7s;
}

.lomudsa_nsagevin .lasmigem {
  width: 100%;
  background-color: #bb0000;
  height: 68px;
  position: absolute;
  top: 98px;
  left: 0px;
  transform: skewY(10deg);
  transition: all 0.7s;
}

.lomudsa_nsagevin:hover .sakilan {
  top: -30px;
  transition: all 0.7s;
}

.lomudsa_nsagevin:hover .lasmigem {
  top: 29px;
  transition: all 0.7s;
}

/* second button slider css styles */

.galogtus_abunes {
  width: 300px;
  height: auto;
  border: 3px solid #bb0000;
  padding: 20px;
  margin: 30px auto;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  overflow:hidden;
  cursor: pointer;
  font-size: 24px;
  color: #bb0000;
  box-sizing: border-box;
}

.galogtus_abunes p {
  position: relative;
  z-index: 999;
}

.galogtus_abunes:hover {
  color: #fff;
}

.galogtus_abunes .t-slider1 {
  width: 100%;
  background-color: #bb0000;
  height: 60px;
  position: absolute;
  top: -98px;
  left: 0px;
  transform: skewY(-10deg);
  transition: all 0.7s;
}

.galogtus_abunes .d-slider1 {
  width: 100%;
  background-color: #bb0000;
  height: 68px;
  position: absolute;
  top: 98px;
  left: 0px;
  transform: skewY(-10deg);
  transition: all 0.7s;
}

.galogtus_abunes:hover .t-slider1 {
  top: -30px;
  transition: all 0.7s;
}

.galogtus_abunes:hover .d-slider1 {
  top: 29px;
  transition: all 0.7s;
}





.
.


uWM // FORUMS » uWEBMEISTARS // WEBLAPU PLATFORMAS » WEBLAPU APLIKĀCIJAS, SKRIPTI, SPRAUDŅI » uCoz » Pogas ar CSS palidzibu, divi veidi
  • Lappuse 1 no 1
  • 1
Meklēšana:

UWM apmeklēja:

RESPEKTABLĀKIE PORTĀLA FORUMA KLAVIATŪRISTI :
Foruma viszinis
Korijs
UWM karma: 380
Foruma atkarīgais
wuxmachine
UWM karma: 157
Foruma atkarīgais
Robiits
UWM karma: 87
Foruma šamanis
0wn3r
UWM karma: 80
Foruma atkarīgais
H[o_0]LiGaN
UWM karma: 78
Foruma atkarīgais
Spanky
UWM karma: 76
Foruma viszinis
Ar4ssS
UWM karma: 74
Foruma atkarīgais
Profth3tic
UWM karma: 55
Foruma atkarīgais
emciits
UWM karma: 52
Foruma atkarīgais
JackDaniel
UWM karma: 51
Foruma atkarīgais
Antikrists
UWM karma: 51
Foruma atkarīgais
Ken_D
UWM karma: 50
Ielāde...