WordPress Article Insert Download Button_Custom Button Style

After building a websiteyou often encounter situations where you need to provide download links or demo addresses when publishing articles. Inserting a hyperlink by default doesn't look good. How can you insert a beautiful download button into an article? Here are two simple methods to share with everyone.

Pure code version, recommended for the classic editor.

The download button on Naibabiji's website 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 method is as follows:

1. Create a CSS style for a download button in the CSS styles;
2. When writing an article, 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 other elements inside the download button, you can add the corresponding CSS styles yourself.This websitehas many beautiful button styles that you can copy. You might say that inserting code this way is too troublesome, requiring manually adding a class="theme-demo" to the link each time or manually copying the code. Don"t worry, check out this article:WordPress Editor Enhancement_Quickly Insert Specific Code: AddQuicktag

System-built button, recommended for the Gutenberg editor

If you are using the Gutenberg editor, it's much simpler—you can directly insert a button. The method is as follows: 1. When publishing an article, click the ➕ button, then search for 'button', as shown in the image below:2. After inserting the button, set its style, color, and add a link in the block settings on the right side, and a beautiful download button will appear.If you don't want the button to be so round in the Gutenberg editor, simply adjust the border radius to a smaller value or 0 in the settings on the right. If you are building a resource download site, you can install specialized download plugins, which also come with nice download buttons and make resource management easier.

• 6 WordPress Resource Download Management Plugins_Easily Build a Software Download Site