zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Button Stylen =)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.06.2013, 14:56
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard Button Stylen =)

Hallo =)

Ich bin grade dabei einen Button zu stylen... So weit so gut...
Habe jedoch 2 Probleme... Hier erstmal der Code...

HTML:
Code:
<button type="button" name="" value="" class="btn_blue_small joinus">Join us!</button>
CSS:
Code:
.btn_blue_small {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #f5f5f5;
	padding: 10px 20px;
	background: -moz-linear-gradient( top, #07b4ee 0%, #069ae9);
	background: -webkit-gradient( linear, left top, left bottom, from(#07b4ee), to(#069ae9));
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #0079ba;
	-moz-box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1);
	-webkit-box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1);
	box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1);
	text-shadow: 1px 1px 1px rgba(255,255,255,0.2), 0px 1px 0px rgba(255,255,255,0);
}

.btn_blue_small:hover {
	cursor: pointer;
	background: -moz-linear-gradient( top, #00ccff 0%, #00a6ff);
	background: -webkit-gradient( linear, left top, left bottom, from(#00ccff), to(#00a6ff));
	-webkit-transition: background 250ms ease; /* WebKit */
	-moz-transition: background 250ms ease; /* Firefox */
	-o-transition: background 250ms ease; /* Opera */
	transition: background 250ms ease; /* Standard */
}

.joinus {
	float: right;
	margin: -62px 10px 0 0;
}
Erstes Problem:
Und zwar funktioniert das Transition nicht =( Wo liegt mein Fehler?

Zweites Problem:
Wie ihr seht habe ich dem Button 2 classes zugewiesen... Diese dient wie ihr sie hier seht nur zur Positionierung...
Jedoch möchte ich diesem Button eine Grafik zu weisen... Am liebsten über die joinus class...
Denn es wird noch viel mehr Buttons mit aller art von Icons geben und ich würde nur sehr ungern endlos oft die komplette btn_blue_small Class Duplizieren...

Wenn ich jedoch bei joinus einen BG einbinde verschwindet der BG Color wert aus der btn class... Klar weil ja nur 1 BG möglich ist...
Wie würdet ihr dieses Problem lösen?

Freue mich schon auf Konstruktive Vorschläge =)

Gruß Sven
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.06.2013, 15:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Cybertronic Beitrag anzeigen
Und zwar funktioniert das Transition nicht =( Wo liegt mein Fehler?
Gradients sind background-images und die sind nicht animierbar.

In deinem Codeschnipsel fehlt die prefix-lose Syntax für Gradients. Woher hast du diese Notation?

Zitat:
Wenn ich jedoch bei joinus einen BG einbinde verschwindet der BG Color wert aus der btn class...
Du hast keine Werte für Hintergrundfarben in deinem Codeschnipsel. Es ist nicht nachvollziehbar, wovon du redest.
Poste einen Link, der dein Problem zeigt. Du bist doch nicht neu hier, du musst doch wissen, wie das hier funktioniert.

Geändert von fricca (09.06.2013 um 15:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.06.2013, 15:54
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Den Button habe ich mit hilfe des CSS3 Button Generators gemacht: CSS3 Button Generator

Normal benutze ich nie Generatoren aber ich bin noch nicht so fit in CSS3...

Ja bin schon ne weile hier, daher bin ich einfach davon ausgegangen das die css schnipsel reichen weil es sich hierbei nur um einen Button handelt der ohne Grafiken usw Funktioniert

Hier kannst du dir bisher anschauen was ich hab:
http://www.mywebexile.de/demo/ps/

Zitat:
Du hast keine Werte für Hintergrundfarben in deinem Codeschnipsel.
Code:
background: -moz-linear-gradient( top, #07b4ee 0%, #069ae9);
background: -webkit-gradient( linear, left top, left bottom, from(#07b4ee), to(#069ae9));
Habe das einfach als Hintergrundfarbe betrachtet.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.06.2013, 16:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Cybertronic Beitrag anzeigen
Den Button habe ich mit hilfe des CSS3 Button Generators gemacht: CSS3 Button Generator
Dieses Tool solltest du nicht benutzen. Die Syntax ist veraltet. Die prefix-lose Notation wegzulassen war noch nie sinnvoll und aktuelle Browserversionen brauchen keine Prefixes mehr für Gradients.

Zitat:
Normal benutze ich nie Generatoren aber ich bin noch nicht so fit in CSS3...
Dann ist es jetzt wohl an der Zeit, sich einzulesen. Daran führt kein Weg vorbei, wenn du CSS3 verwenden willst.

Zitat:
Ja bin schon ne weile hier, daher bin ich einfach davon ausgegangen das die css schnipsel reichen weil es sich hierbei nur um einen Button handelt der ohne Grafiken usw Funktioniert
Nein, Codeschnipsel reichen nie.
Selbst wenn man sich die Mühe macht, deine Schnipsel lokal zu einem lauffähigen Code zusammenzusetzen, sieht man gar nichts, weil du den Button geschickt außerhalb des sichtbaren Bereiches platziert hast.

Zitat:
Hier kannst du dir bisher anschauen was ich hab:
Unbenanntes Dokument
Schön.
Ich habe dir ja bereits gesagt, das Gradients nicht animierbar sind.

Wenn ich einen solchen animierten Gradient brauchen würde, würde ich versuchen, generierten Content mit einem Verlauf unter den Text zu positionieren und für diesen die opacity zu animieren.

Zitat:
Code:
background: -moz-linear-gradient( top, #07b4ee 0%, #069ae9);
background: -webkit-gradient( linear, left top, left bottom, from(#07b4ee), to(#069ae9));
Habe das einfach als Hintergrundfarbe betrachtet.
Es nützt aber nichts, wenn du dir deine eigene Betrachtungsweise erfindest. So kann man nicht sinnvoll miteinander reden.
background ist die zusammenfassende Eigenschaft.
background-color ist Hintergrundfarbe.
background-image ist Hintergrundbild. Gradient ist ein background-image.
Ich weiß noch immer nicht, worauf du oben hinaus willst.

Geändert von fricca (09.06.2013 um 16:16 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 09.06.2013, 16:21
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Ist gut danke ^^ hab den BG kram einfach als Grafik eingefügt nun passt es.

Also transition: background 250ms ease; /* Standard */ reicht jetzt?

dachte mir:
Code:
	-webkit-transition: background 250ms ease; /* WebKit */
	-moz-transition: background 250ms ease; /* Firefox */
	-o-transition: background 250ms ease; /* Opera */
macht noch sinn für Leute mit veralteten Browsern?
Mit Zitat antworten
  #6 (permalink)  
Alt 09.06.2013, 16:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Cybertronic Beitrag anzeigen
Also transition: background 250ms ease; /* Standard */ reicht jetzt?
Nein.
Ich habe nichts von transition geschrieben, sondern von gradients!
Mit Zitat antworten
  #7 (permalink)  
Alt 09.06.2013, 16:30
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Ja Sorry stimmt...
Hmmm Und wie macht man das heute? so einen farbverlauf?
Änderungen in der neuen CSS3-Farbverlauf-Syntax (ohne Vendor-Prefix)
Seiten die ich auf Anhieb finde machen das auch mit gradients...
Mit Zitat antworten
  #8 (permalink)  
Alt 09.06.2013, 16:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Jetzt lies doch mal bitte genau, was ich schreibe!
Wenn du den Link liest, den du gerade selbst gepostet hast, wirst du sehen, was an deinem Code fehlt.
Mit Zitat antworten
  #9 (permalink)  
Alt 09.06.2013, 16:50
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Code:
.btn_blue_small {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #f5f5f5;
	padding: 10px 20px;
	background: linear-gradient(180deg, #07b4ee, #069ae9);
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #0079ba;
	-moz-box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1);
	-webkit-box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1);
	box-shadow: 0px 1px 1px rgba(000,000,000,0.2), inset 0px 0px 1px rgba(252,252,252,1);
	text-shadow: 1px 1px 1px rgba(255,255,255,0.2), 0px 1px 0px rgba(255,255,255,0);
}

.btn_blue_small:hover {
	cursor: pointer;
	background: linear-gradient(180deg, #00ccff, #00a6ff);
}
Also macht man das jetzt so richtig? Und Transition kann man sich vorerst abschminken ? =(
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.06.2013, 16:50
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Wenn du einen Effekt mit Transitions auf eine Hintergrundverlauf haben willst, kannst du bei Gradients auch mit der Position herumspielen.
Ein Beispiel (jedoch mit der alten Gradient Notation) dazu findet sich hier: CSS3 gradient transition with background-position | Sapphion
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
disabled Button stylen Camelrider CSS 3 30.06.2009 16:13
FF Problem: button mit image darolla CSS 6 02.04.2007 09:49
Button - Rahmen dieter99 CSS 1 06.12.2006 11:13
button vom dropdown stylen dreiaugen CSS 2 21.02.2006 12:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:10 Uhr.