How/where to upload CSS for buttons, without causing conflicting code ?

When you use the button generator, there is a form field for the “classname” (top right side of the entry form) — so you need to enter a UNIQUE class name — then there won’t be any conflicts with any existing CSS.

You should have a different class name for each button — that’s how the generator is set up to work.

I did that, uploaded the kleinebutton.css file to
/HTML/wp-content/themes/wave/

(in which there is also file named style.css) but the button does not appear on the testpage, just the button text.

Buttoncode:
<a href="https://www.videodope.net/tag/time-lapse/" class="kleinebutton">Time Lapse</a>

<style type="text/css">
.kleinebutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:11px;
	font-weight:normal;
	padding:3px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.kleinebutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.kleinebutton:active {
	position:relative;
	top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>

Any hints ?

You are confused about adding the CSS code — all you really need to do is add the button styles to the existing style.css file. But remove the two style tags (top and bottom of the code you posted above) or it won’t work.

The reason using the second stylesheet does not work is that you have not linked it to your pages — but that’s more complicated so I’d go with the above.

Many thanks!
Unfortunately I still did not manage to get work. Via FTP I checked all the folders that contain css files. Following your hint I added the code to HTML/wp-content/themes/wave/style.css without and with the style tags. I also tried uploading the css file to /HTML/wp-admin/css/ and to /HTML/wp-content/themes/wave/css/ but no result. It must very simple but still it’s unclear whats the point here.

In the HTML/wp-content/themes/wave/style.css there is almost no content btw just this text

/*
Theme Name: Wave
Theme URI: https://themeforest.net/user/mattbrett
Description: All you need to build your own video-centric site.
Version: 1.7.5
Author: <a href="https://mattbrett.com">Matt Brett</a>
Author URL: https://mattbrett.com
*/

So perhaps the theme style control might be hidden somewhere else or perhaps not using css at all…

This is the main stylesheet currently being used by your site when I view it:
https://www.videodope.net/wp-content/themes/wave/css/screen.css

So it looks like perhaps there are different stylesheets for different devices.

Since that’s a commercial theme — suggest you go to themeforest site for support…