🚀 Is building a website too difficult? Let me guide you step by step—Learn about the 「Naibabiji WordPress Website Building Coaching Service」 →

WordPress Post Insert Download Button_Custom Button Style

After Building a WebsiteWhen publishing posts, you often encounter situations where you need to provide download links or demo addresses. Inserting a default hyperlink doesn't look good. How can you insert a beautiful download button into a post? Here are two simple methods to share with everyone.

Pure Code Version, Recommended for Classic Editor

The download button on Naibabiji is implemented using code.Website Building NotesThe implementation method is also simple: just set up a separate CSS style for the download button. The usage is as follows:
  1. Create a CSS style for the download button within the CSS styles;
  2. When publishing a post, insert an a tag with the class attribute value.
下载地址按钮代码The CSS used for the download button on the Naibabiji website is as follows:
.theme-demo {
    border-radius: 5px;
    color: #ffffff!important;
    display: inline-block;
    margin-right: 10px;
	  margin-bottom: 10px;
    padding: 10px 15px;
	background-color: #3bc492;
	text-decoration: none!important;
	text-indent: 0!important;
}
Add it to your Theme's CSS style file. Method:
  1. WP Admin Dashboard, Appearance, Theme Editor.
  2. Copy the above content and add it to the very end of style.css, then save.
If you also want to insert download icons or similar inside the download button, just add the corresponding CSS styles yourself.This websitehas many beautiful button styles; you can go copy some. You might say that inserting code this way is too troublesome, having to manually add a class="theme-demo" to the link or manually copy the code each time. Don"t worry, check out this article:WordPress Editor Enhancement_Quick Insert Specific Code: AddQuicktag

System built-in button, recommended for Gutenberg editor

If you are using the Gutenberg editor, then it's not so troublesome, you can directly insert a button. The method is as follows: 1. When publishing a post, click the ➕ button, then search for 'button', as shown in the image below:古腾堡编辑器插入按钮2. After inserting the button, set the button's style, color, and add a link in the right block area, and a beautiful download button will appear.古腾堡编辑器插入按钮If you don't want the button to be so round in the Gutenberg editor version, you just need to adjust the border radius to a smaller value or 0 in the right settings. If you are building a resource download site, you can install a dedicated download plugin, which also comes with beautiful download buttons and makes resource management easier for you.

🚀 Still feeling confused after reading the tutorial? Let me guide you step-by-step instead.

「Naibabiji WordPress Website Building Coaching」 — From selecting a domain and purchasing hosting to installing themes and publishing posts, I「ll guide you through every step, helping you avoid detours and reach your goals directly.

👉 Learn about Website Building Coaching Service
🔒

Comments are closed

The comment function for this article is closed. If you have any questions, please feel free to contact us through other channels.

×
二维码

Scan to Follow