• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

einmal neuen Button in anderer css Datei ?

Orac

Mitglied
Hallo,
ich brauche einmal den kompletten Code für einen Button z.B in Rot um diesen in einer anderen CSS Datei zu lagern.
Leider blicke ich da nicht ganz durch was man für einen Button alles braucht.
Deshalb mal hier das komplette CSS für die Buttons

Code:
/* Buttons */
.button,a.button,a.button:link,a.button:active,a.button:visited {
  background: #777 none repeat scroll 0 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0.85rem;
  padding: 0.825rem 1rem;
  text-align: center;
  transition: all 0.20s linear 0s;
  -o-transition: all 0.20s linear 0s;
  -ms-transition: all 0.20s linear 0s;
  -moz-transition: all 0.20s linear 0s;
  -webkit-transition: all 0.20s linear 0s;
}
.button.rounded-btn {
  border-radius: 4px;
}
.button.rounded-full-btn {
  border-radius: 100px;
}
.button:hover {box-shadow: 0 0 10px 100px rgba(255,255,255,0.15) inset;}
.button.secondary-btn,a.button.secondary-btn,a.button.secondary-btn:link,a.button.secondary-btn:active,a.button.secondary-btn:visited {
  background: #444 none repeat scroll 0 0;
}
.button.cancel-btn,a.button.cancel-btn,a.button.cancel-btn:link,a.button.cancel-btn:active,a.button.cancel-btn:visited {
  background: #dc003a none repeat scroll 0 0;
}
.button.submit-btn,a.button.submit-btn,a.button.submit-btn:link,a.button.submit-btn:active,a.button.submit-btn:visited {
  background: black none repeat scroll 0 0;
}
.button.reload-btn,a.button.reload-btn,a.button.reload-btn:link,a.button.reload-btn:active,a.button.reload-btn:visited {
  background: #ff9800 none repeat scroll 0 0;
}
.button.disabled-btn {
  cursor: not-allowed!important;
  opacity: 0.2;
}
.button i {
  background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
  border-radius: 27px;
  color: #fff!important;
  display: inline-block;
  font-size: 0.8rem;
  height: 27px;
  line-height: 27px;
  margin-right: 5px;
  width: 27px;
  transition: all 0.20s linear 0s;
  -o-transition: all 0.20s linear 0s;
  -ms-transition: all 0.20s linear 0s;
  -moz-transition: all 0.20s linear 0s;
  -webkit-transition: all 0.20s linear 0s;
}
.button:hover > i {
  background: rgba(0, 0, 0, 0.06) none repeat scroll 0 0;
}
HTML:
<div class="line">             
  <div class="margin">               
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn s-12 margin-bottom" href="#">Button</a>
    </div>           
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn submit-btn s-12 margin-bottom" href="#">Submit Button</a>
    </div>           
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn cancel-btn s-12 margin-bottom" href="#">Cancel Button</a>
    </div>           
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn reload-btn s-12 margin-bottom" href="#">Reload Button</a>
    </div>           
    <div class="s-12 m-6 l-five">
      <a class="button rounded-btn disabled-btn s-12 margin-bottom" href="#">Disabled Button</a>
    </div>         
  </div>         
</div>
wäre jemand so freundlich und könnte mir das raussuchen ?
 

Anhänge

  • Unbenannt-1.png
    Unbenannt-1.png
    7,5 KB · Aufrufe: 7
Werbung:
Bevor ich das mache, beschäftigst du dich mit CSS-Selektoren!

https://www.w3schools.com/cssref/css_selectors.asp

Und erklärst mir, was dein wirrwarr aus Code darstellen soll. Warum denn .button,a.button,etc.? Es reicht einfach .button

Tja was auch immer, hier ist dein Code:
https://jsfiddle.net/Aaron3219/v02pL9qx/
Eigentlich ist es relativ blöd von mir, dir den Code einfach vorzusetzen, weil viele sich den Code einfach nur rauskopieren... Ich kann dir trotzdem nur empfehlen dich mit dem Link oben zu beschäftigen, denn dann sollte mein Code ein Kinderspiel für dich sein.
 
Zuletzt bearbeitet:
Danke schön, und ja ich weis was Selektoren sind nur ich kenne nicht solche langen wie z.B.
Code:
 class="button rounded-btn s-12 margin-bottom"
ich kenn nur soclhe
Code:
[CODE] class="irgendwas"
[/CODE]
 
Werbung:
Zurück
Oben