Title: Button Code Last modified: April 1, 2022 --- # Button Code * Resolved [Greendroid](https://wordpress.org/support/users/greendroid/) * (@greendroid) * [4 years, 2 months ago](https://wordpress.org/support/topic/button-code-2/) * 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: * ```
Buttontext
Displaytext
``` * 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 Viewing 2 replies - 1 through 2 (of 2 total) * Plugin Author [mkscripts](https://wordpress.org/support/users/mkscripts/) * (@mkscripts) * [4 years, 2 months ago](https://wordpress.org/support/topic/button-code-2/#post-15534524) * Hi Greendroid, * Glad to hear you like our plugin, thank you! * You have already largely answered your own question 🙂 The jQuery functions you are looking for is click() and slideToggle(). Here you can find an [example](https://www.w3schools.com/jquery/eff_slidetoggle.asp) and/or tutorial. * Kind regards, Team Download After Email * Thread Starter [Greendroid](https://wordpress.org/support/users/greendroid/) * (@greendroid) * [4 years ago](https://wordpress.org/support/topic/button-code-2/#post-15696325) * Hey mkscripts, long time ago and now finally I found the time to try it further. Thanks for your hints, I got it working! Kind regards Greendroid Viewing 2 replies - 1 through 2 (of 2 total) The topic ‘Button Code’ is closed to new replies. * ![](https://ps.w.org/download-after-email/assets/icon-256x256.png?rev=2016027) * [Download After Email - Subscribe & Download Form Plugin](https://wordpress.org/plugins/download-after-email/) * [Frequently Asked Questions](https://wordpress.org/plugins/download-after-email/#faq) * [Support Threads](https://wordpress.org/support/plugin/download-after-email/) * [Active Topics](https://wordpress.org/support/plugin/download-after-email/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/download-after-email/unresolved/) * [Reviews](https://wordpress.org/support/plugin/download-after-email/reviews/) * 2 replies * 2 participants * Last reply from: [Greendroid](https://wordpress.org/support/users/greendroid/) * Last activity: [4 years ago](https://wordpress.org/support/topic/button-code-2/#post-15696325) * Status: resolved