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:
- Create a CSS style for the download button within the CSS styles;
- 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:
- WP Admin Dashboard, Appearance, Theme Editor.
- 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: AddQuicktagSystem 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.
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.