Button Code

Good evening,
thanks for the great plugin, we are using it on our site successfully and without any issues.
I am not very good in programming html/css code to beautify our webpage further. Therefore I am always trying to reuse available code snippets and modify it to our needs. The plugin-button which enlarges and resizes the text with the register form afterwards is really beautiful. To get the same look and feel on our webpage I tried to reuse the button code from the shortcode at another page to just display some text after clicking on the button.
Examples available in the internet for button “hiding” some information at first are always looking or behaving very differently so I really tried to reuse the code from the Download After Mail plugin. But, it is like it is: I don’t get it running ??
I already stripped it down to the following, and I think this should work:

<div class="dae-shortcode-download-wrapper dae-shortcode-download-wrapper-wide">
	<div class="dae-shortcode-download-content-wrapper">
		<div class="dae-shortcode-download-button">
			<span class="dae-shortcode-download-button-text">Buttontext</span>
		</div>
		<div class="dae-shortcode-register-wrapper">
			Displaytext		
		</div>
	</div>
</div>

with the following CSS:

.dae-shortcode-download-button 
{
	color: #ffffff !important;
	background: #75c082 !important;
	font-size: 18px !important;
	font-family: Arial, Helvetica, sans-serif !important;
	width: auto !important;
	padding: 8px 8px !important;
	border-color: #75c082 !important;
	border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	-webkit-border-radius: 10px !important;
}

.dae-shortcode-download-button:hover 
{
	color: #75c082 !important;
	background: #ffffff !important;
	border-color: #75c082 !important;
	font-size: 18px !important;
	font-family: Arial, Helvetica, sans-serif !important;
	width: auto !important;
	padding: 8px 8px !important;
	border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	-webkit-border-radius: 10px !important;
}

.dae-shortcode-download-content-wrapper
{
	text-align: center !important;
}

.dae-shortcode-download-wrapper-wide 
{
	align-items: center !important;
	-webkit-align-items: center !important;
	justify-content: center !important;
	-webkit-justify-content: center !important;
	-moz-justify-content: center !important;
}
.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper 
{
	text-align: center !important;
}

.dae-shortcode-download-wrapper 
{
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	display: flex !important;
	display: -webkit-flex !important;
	flex-direction: column !important;
	-webkit-flex-direction: column !important;
	-moz-flex-direction: column !important;
}

.dae-shortcode-download-wrapper * 
{
	box-sizing: border-box !important;
	margin: unset !important;
	padding: unset !important;
	font-size: unset !important;
	font-family: unset !important;
	font-weight: unset !important;
	font-style: unset !important;
	text-align: unset;
	text-transform: unset !important;
	text-decoration: unset !important;
	letter-spacing: unset !important;
	color: unset !important;
	background: unset !important;
	width: unset !important;
	line-height: normal !important;
	border: unset !important;
	border-radius: unset !important;
	-moz-border-radius: unset !important;
	-webkit-border-radius: unset !important;
	box-shadow: unset !important;
	-moz-box-shadow: unset !important;
	-webkit-box-shadow: unset !important;
	text-shadow: unset !important;
	transition: unset !important;
	outline: unset !important;
	opacity: 1 !important;
}

.dae-shortcode-download-wrapper .dae-shortcode-download-content-wrapper 
{
	min-width: 100% !important;
}

.dae-shortcode-download-wrapper .dae-shortcode-download-button,
.dae-shortcode-download-wrapper .dae-shortcode-download-button:hover 
{
	cursor: pointer !important;
	box-sizing: border-box !important;
	display: inline-block !important;
	margin: 20px !important;
	font-weight: bold !important;
	border: 2px solid !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	text-shadow: none !important;
	transition: 0.4s !important;
	-webkit-transition: 0.4s !important;
	-moz-transition: 0.4s !important;
}

.dae-shortcode-download-wrapper .dae-shortcode-download-button-text 
{
	display: inline-block !important;
}

.dae-shortcode-download-wrapper .dae-shortcode-register-wrapper 
{
	display: none;
}

.dae-shortcode-download-wrapper .dae-shortcode-register-wrapper p
{
	margin: 20px !important;
}

.dae-shortcode-download-wrapper-wide 
{
	flex-direction: row !important;
	-webkit-flex-direction: row !important;
	-moz-flex-direction: row !important;
}

.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper 
{
	min-width: 400px !important;
}

but when I rename e.g. “dae-shortcode” to “mybutton” the code does not work anymore. I searched around and I think some kind of jquery for the button action is missing here, right? And when I rename the identifier, the connection to the jquery function is lost?
Any hint how to get it working? ??
Sorry, for the general html/css programming question, but I thought I will give it a try here.
Thanks and kind regards
Greendroid