Es gibt immer wieder Ideen die man umsetzen möchte, die nicht so einfach sind. Der heutige CSS Trick ist so eine Sache für die ich länger gebraucht habe, bis ich eine gute Lösung gefunden habe. Im letzten Sommer ist ein Kundenprojekt aktuell geworden, wo genau so etwas hätte umgesetzt werden müssen. Der vorherige Entwickler hat den Button aber als JPG erstellt und dann mit einem Mouse Hover Effekt ersetzen lassen. Auch dieser Trick hätte klappen können, aber mir gefiel diese Idee nicht und so machte ich mich auf die Suche nach einer guten Lösung.

Nach gut 5 Monate testen und rumexperimentieren habe ich dann diese einfache Lösung gefunden, die jeder anwenden kann.

Ich habe das ganze 2 mal gemacht und zwar einmal für einen einfachen Link und einmal für einen Button.

Wie ihr seht ist es eigentlich gar nicht so schwer und kann sehr einfach angepasst werden. Ihr könnt einfach die Farben austauschen und euren Wünschen anpassen.

Video Anleitung

Quellcode

Denkt einfach daran, HTML Code in den HTML Bereich, CSS in den style.css und dann sollte es gehen 🙂

Der HTML Code

1
2
3
<button type="button" class="gradientbutton">Klick mich</button>
<br><br><br>
<a href="#" class="specialgradient" id="sbutton">www.chefblogger.me</a>

Der CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
	body {
		background-color: white;
	}
 
	button {
 
		background-color: transparent;
		width: 150px;
		height: 50px;
		padding: 12px;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
		font-size: 20px;
		border: 3px solid transparent;
	}
 
	.gradientbutton {
		border-image: -webkit-linear-gradient(left,#f5c860, #d54447);
		border-image-slice: 1;
		color:black;
 
	}
 
	.gradientbutton:hover {
		border: none;
		background-image: -webkit-linear-gradient(left,#f5c860, #d54447);
		color: white;
 
	}
 
	#sbutton {
		background-color: transparent;
		width: 150px;
		height: 50px;
		padding: 12px;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
		font-size: 20px;
		border: 3px solid transparent;
		border-image: -webkit-linear-gradient(left,#f5c860, #d54447);
		border-image-slice: 1;
		text-decoration: none;
 
	}
 
	.specialgradient {
		color: black;
	}
 
	.specialgradient:hover {
		border: none;
		background-image: -webkit-linear-gradient(left,#f5c860, #d54447);
		color: white;
	}