WordPress Download Button
The WordPress download button is a special button which are linked to file in repository of your software at WordPress.org. In this article you will learn how to add a dark with gradient WordPress download active button to your website or blog, using just code (HTML, CSS & SVG data), without any image files. The design of button and WordPress icon will be generated by code.
We begin creating our button by making the body of button and then we will add the WordPress logo and text .
There is a HTML code (markup) of the buttons body:
<a class="wp_download_btn" href="#">
</a>
And there is a stylesheet for it:
.wp_download_btn {
height: 45px;
border: 1px solid #2a2c2f;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px 5px 5px 5px;
display:inline-block;
background-color: #45484d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#45484d), to(#000000));
background-image: -webkit-linear-gradient(top, #45484d, #000000);
background-image: -moz-linear-gradient(top, #45484d, #000000);
background-image: -ms-linear-gradient(top, #45484d, #000000);
background-image: -o-linear-gradient(top, #45484d, #000000);
background-image: linear-gradient(to bottom, #45484d, #000000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#45484d, endColorstr=#000000);
}
.wp_download_btn:hover {
border: 1px solid #151617;
background-color: #2d2f32;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2f32), to(#1a1a1a));
background-image: -webkit-linear-gradient(top, #2d2f32, #1a1a1a);
background-image: -moz-linear-gradient(top, #2d2f32, #1a1a1a);
background-image: -ms-linear-gradient(top, #2d2f32, #1a1a1a);
background-image: -o-linear-gradient(top, #2d2f32, #1a1a1a);
background-image: linear-gradient(to bottom, #2d2f32, #1a1a1a);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2d2f32, endColorstr=#1a1a1a);
}
Thus we created the dark with gradient active download button by using only pure CSS. But it not contain any text or logo of WordPress, so we need to create this. We can use usual image file, but I prefer to use the HTML-5 tag <svg\> thats include icon and text in SVG formate. This method has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down.
I used Adobe Illustrator to draw the WordPress logo and text, then I saved it in the code instead of the file. Now this code need to optimize, I use for this online SVG-optimizer (https://petercollingridge.appspot.com/svg-editor).
There is a SVG data that we will use:
<svg width="200" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 722.3 164.7" xml:space="preserve"><style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;}
.st2{font-family:"Marion-Regular";}
.st3{font-size:60px;}
.st4{font-family:"PTSerif-Bold";}
.st5{font-size:55px;}
</style><path class="st0" d="M9.3 82.4c0-39.4 31.7-71.1 71-71.1 39.4 0 71 31.8 71 71.6 0 39-32 70.9-71.1 70.9C40.9 153.7 9.3 121.9 9.3 82.4zM80.1 14.4c-38 0.1-68 30.7-67.9 69.3 0.1 36.4 31.4 67.1 68.4 67 37.8-0.1 67.8-31 67.8-69.6C148.2 44.8 117.1 14.3 80.1 14.4zM432.8 122.4c-0.7 9.5-2.3 13.6 7 17.1 -7.6 0-15.3 0-22.9 0 0-0.3-0.1-0.5-0.1-0.8 0.7-0.3 1.4-0.7 2.1-0.8 3.4-0.5 5.2-2.6 5.3-5.8 0.2-8.1 0.1-16.2 0-24.3 -0.1-4.6-3.8-5.5-8-6.4 0.9-0.7 1.3-1.3 1.7-1.3 8.4 0.1 16.8 0 25.1 0.6 4.6 0.3 8.5 2.8 10.1 7.7 1.2 3.7 0.6 7.4-2.2 10.1 -2.1 2-5 3.3-8 5.3 4.8 4.7 8.4 10.7 15.2 13.3 5.5 2.2 8.9 0.4 9.3-5.5 0.5-7.5 0.1-15 0.2-22.5 0.1-5-3-7-7.9-7.4 0.2-0.4 0.4-0.8 0.6-1.3 1.3-0.1 2.6-0.3 3.9-0.3 8.8 0 17.6 0.1 26.5-0.1 3.5-0.1 5.1 0.9 4.8 4.6 -0.2 2 0 4 0 6 -0.5 0-0.9 0.1-1 0 -3.9-6.5-8.8-8.7-16.4-7.1 -0.9 0.2-2.1 1.5-2.2 2.4 -0.3 3.6-0.1 7.2-0.1 10.6 6.6 1.7 8.3 0.8 11.8-7 0 6.8 0 12.4 0 18.1 -0.3 0.1-0.5 0.1-0.8 0.2 -0.3-1-0.6-1.9-0.8-2.9 -1-4.3-4.6-3.8-7.6-3.9 -3.6-0.1-2.3 2.9-2.5 4.8 -0.1 1.1-0.1 2.3 0 3.5 0.3 5.9 1.8 7.3 7.7 7.4 1 0 2 0 3 0 5.8-0.1 5.8-0.1 11.7-8.1 -0.3 4-0.2 7-0.8 9.8 -0.2 0.8-2 1.9-3 2 -14.6 0.1-29.2 0.2-43.8 0 -1.4 0-3.2-1.1-4.2-2.3 -3.3-3.8-6.3-7.9-9.6-11.8C435.8 124.9 434.6 124 432.8 122.4zM432.2 119.7c2.4 0 4.1 0.1 5.8 0 3.3-0.2 5.7-1.9 6.8-5.1 1.2-3.4 1-7.1-2.1-9 -2.6-1.6-6.1-1.6-9.3-2.1 -0.3 0-1.2 1.5-1.3 2.3C432.1 110.2 432.2 114.6 432.2 119.7zM277.5 100.7c7.8 0 15.6-0.2 23.4 0.1 6.5 0.3 11 4.2 11.9 9.5 0.8 4.8-2.2 8.8-8.5 11.5 -0.8 0.3-1.5 0.8-3.3 1.8 5.3 4.6 9.6 9.6 15 12.9 7.5 4.6 13 1.1 13.2-7.6 0.1-6.1 0-12.1 0-18.2 0-4.7-0.9-8.7-6.9-9.3 0.1-0.4 0.3-0.9 0.4-1.3 9.7 0.5 19.5 0.1 28.9 1.6 10.4 1.7 15.8 9.8 15.1 19.6 -0.7 9.8-8.1 17.4-18.5 17.8 -12.7 0.5-25.4 0.4-38.2 0.3 -1.6 0-3.5-1.2-4.6-2.5 -3.4-3.9-6.5-8.1-9.8-12.1 -0.7-0.8-2.1-1.1-3.2-1.7 -0.4 1-1.1 2-1.1 3 0 2.6-0.3 5.5 0.8 7.7 1.1 2.2 3.7 3.7 5.5 5.3 -6.4 0-13.3 0-20.3 0 7.9-2 6.6-8.4 6.7-14.1 0.1-4.9 0.2-9.8-0.1-14.7C283.8 106.1 283.3 101.7 277.5 100.7zM336.5 118.9C336.5 118.9 336.5 118.9 336.5 118.9c0 4.2-0.3 8.4 0.2 12.5 0.2 1.9 1.9 4.4 3.5 5 4.7 1.8 11.9-0.7 14.7-5 4.5-6.8 4.5-14.3 1.1-21.4 -3.1-6.5-9.4-7.3-15.9-7.3 -2.6 0-3.6 0.9-3.6 3.6C336.6 110.6 336.5 114.8 336.5 118.9zM291.2 111.5C291.2 111.5 291.2 111.5 291.2 111.5c0 1.9-0.1 3.8 0.1 5.6 0.1 0.9 0.8 2.5 1.1 2.4 3.1-0.2 6.4 0 9.1-1.2 3.2-1.4 3.8-4.8 3.4-8.2 -0.4-3.5-2.4-5.8-5.7-6.8 -5.9-1.9-7.9-0.5-7.9 5.6C291.2 109.8 291.2 110.6 291.2 111.5zM212.1 88.7c6.4 0 12.9 0 19.3 0 -9.7 1.6-10.5 9.9-12.9 16.9 -3.7 10.7-7 21.4-10.5 32.1 -0.4 1.3-1 2.5-2.5 3.8 -2-6.1-3.9-12.2-5.9-18.4 -1.9-6-3.9-12-5.9-17.9 -0.5 0-1 0-1.5 0 -2 6.1-4 12.1-6 18.2 -2 6-4 12-6.9 18.1 -0.6-1.5-1.2-3-1.7-4.5 -3.8-11.8-7.7-23.6-11.4-35.5 -1.9-5.9-3.8-11.7-11.3-12.7 8.1 0 16.3 0 24.4 0 0 0.3 0 0.7-0.1 0.7 -7.1 1.8-7.9 3.2-5.5 10.3 2.5 7.7 5.2 15.5 7.8 23.2 0.4 0 0.9 0 1.3 0.1 4-11.5 7.9-22.9 11.9-34.4 0.5-0.1 1.1-0.1 1.6-0.2 3.9 11.5 7.8 23.1 12.1 36 1.2-2.8 1.9-4.4 2.4-6 2.2-6.3 4.3-12.5 6.4-18.8C219.4 92.8 218.7 91.5 212.1 88.7zM387.2 118.1c0 3.2-0.1 6.2 0 9.2 0.4 7.7 1.1 8.4 8.4 10.7 0.3 0.1 0.5 0.6 1.4 1.5 -9.5 0-18.4 0-27.5 0 0.4-0.8 0.5-1.3 0.6-1.3 7.1-0.7 8.8-5.3 8.7-11.5 -0.2-8.8 0.1-17.6-0.1-26.5 -0.2-7.7-0.9-8.3-8.2-10.4 -0.3-0.1-0.6-0.5-1.1-1 0.6-0.4 1.1-0.8 1.6-0.8 9.8 0.1 19.7-0.3 29.5 0.6 8.4 0.7 13.2 7.3 12.7 15.3 -0.4 6.5-5.1 11.5-12.6 12.8C396.4 117.5 392.1 117.6 387.2 118.1zM387.1 113.2c2.7 0 5 0.1 7.3 0 6.1-0.2 9.6-3.8 9.9-9.8 0.4-8.3-7.2-13.9-15.4-11.3 -0.7 0.2-1.6 1.3-1.7 2C387 100.2 387.1 106.4 387.1 113.2zM249.3 141c-16.2 0-27.3-13.8-22.3-27.7 3.4-9.5 13-15 25.1-14.3 9.7 0.5 18.3 7.7 20.4 17.1 2.6 11.7-7.2 24-19.8 24.9C251.6 141.1 250.4 141 249.3 141zM265 121.4c0-9.9-4.2-16.9-10.5-19 -6.3-2.2-13-0.3-16.6 5 -4.9 7.3-5.2 15.1-1.4 23 3.6 7.5 12.6 10.3 19.9 6.3C263 133 264.7 126.7 265 121.4zM510 137.9c-1 1.2-1.9 2.3-3.6 4.3 0-6.3 0-11.4 0-16.6 0.3-0.1 0.6-0.2 1-0.3 0.5 1 1 2 1.4 3 2.1 5.7 6.1 9 12.2 9.5 3.2 0.3 6.2-0.7 7.5-3.9 1.4-3.4-0.5-5.9-3.3-7.6 -3-1.8-6.1-3.2-9.2-4.8 -1.8-0.9-3.6-1.8-5.2-3 -3.8-2.9-5.5-6.7-4.4-11.4 1-4.6 4.5-7.1 8.8-7.9 2.7-0.5 5.7 0 8.5 0.4 2.5 0.4 5.2 3.8 7.5-0.5 0 4.5 0 8.9 0 13.4 -0.4 0.1-0.7 0.1-1.1 0.2 -0.6-1.5-1.2-3-1.9-4.5 -2.4-5-7.6-7.4-12.1-5.5 -4.3 1.8-5.1 6.1-1.2 8.7 3.6 2.4 7.6 4.1 11.4 6.1 8 4.1 10.8 9.7 8 16.2 -2.7 6.3-11.2 9.6-18.5 7C513.9 139.9 512 138.9 510 137.9zM565.2 101.2c0.9-0.8 1.7-1.7 3.4-3.2 0 5.4 0 9.9 0 14.4 -0.3 0.1-0.6 0.2-1 0.3 -0.6-1.2-1.2-2.5-1.7-3.7 -2-5-6.8-8-11.2-6.6 -1.8 0.6-4.3 2.4-4.4 3.9 -0.2 1.7 1.2 4.4 2.8 5.5 3.3 2.3 7.1 3.8 10.7 5.6 8 4 10.8 9.5 8.1 15.8 -2.8 6.7-11.2 10-18.7 7.4 -2-0.7-3.9-1.8-5.9-2.8 -0.9 1.1-1.7 2.2-3.3 4.4 0-6.4 0-11.6 0-16.7 0.3-0.1 0.6-0.2 1-0.3 0.4 1.1 0.8 2.1 1.2 3.2 2.1 5.7 6.7 9.2 12.4 9.3 3.2 0.1 6.2-0.8 7.4-4.2 1.2-3.3-0.7-5.7-3.3-7.3 -3.6-2.1-7.5-3.8-11.2-5.7 -4-2.1-7.4-4.7-7.9-9.6 -1-8.7 7.3-14.6 16.9-11.8C562 99.7 563.5 100.5 565.2 101.2zM43 54.1c2.3-0.2 4.2-0.1 5.8-0.7 1.2-0.4 2.9-1.7 3-2.7 0.2-2.1-1.6-2.6-3.5-2.5 -6 0.3-12 0.6-18.1 0.4 9-13.9 21.6-22.5 37.7-25.7 19.6-3.9 37.1 0.8 52.7 13.9 -10.5 3.9-12.8 10.3-7.7 20 1.4 2.6 3 5.1 4.4 7.6 3.9 7.1 5.3 14.7 3 22.6 -3 10.4-6.1 20.8-10 31.2 -7.1-21.1-14.2-42.3-21.5-63.9 2.2-0.3 4-0.5 5.8-0.7 1.9-0.2 3.7-1 3.1-3 -0.3-1-2.2-2.2-3.5-2.2 -10.2-0.2-20.4-0.2-30.5 0 -1.2 0-2.3 1.5-3.5 2.2 1 1 2 2.9 2.9 2.8 4.9-0.4 6.6 2.4 7.8 6.5 1.9 6 4.3 11.9 6.4 17.9 0.4 1.2 0.6 2.7 0.3 3.9 -3.9 12.2-8 24.3-12.1 36.4 -0.1 0.3-0.4 0.5-0.8 1C57.5 97.3 50.4 75.9 43 54.1zM100.3 140.2c-12.4 4.1-24.5 4.3-37.1 0.9 6-17.6 11.9-34.8 18.2-53C87.8 105.9 94 122.8 100.3 140.2zM53.3 137.1c-30.7-14.8-41.6-52.4-28.7-78.7C34.2 84.6 43.6 110.5 53.3 137.1zM111.2 134.9c3.6-10.4 6.9-20.1 10.2-29.8 3.1-9 6.2-17.9 9.4-26.9 2.6-7.5 4-15.1 3.3-23.2C147.9 77.5 142.3 116.5 111.2 134.9z"/><rect x="576" y="99" class="st1" width="197.9" height="95.4"/><text transform="matrix(1 0 0 1 576.0038 140.2977)" class="st0 st2 st3">.ORG</text><rect x="162.2" y="21.9" class="st1" width="409.2" height="60.1"/><text transform="matrix(1 0 0 1 162.1733 63.2672)" class="st0 st4 st5">Download from</text></svg>
Cool that this logo and text is vectored.
Now let’s create the php function in which we will close the all code above. For this we need to manage functions.php file of theme we use, but I prefer to use the wp-plugin “My Custom Functions” for this.
Here’s what we’ve got:
/* WordPress Download Button
* by Arthur Gareginyan
************************************/
function wp_download_btn($attr, $content = null){
$stylesheet = "/* WordPress Download Button */
.wp_download_btn {
height: 45px;
text-decoration: none !important;
border: 1px solid #2a2c2f;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
display: inline-block;
background-color: #45484d;
background-image: -webkit-gradient(linear,left top,left bottom,from(#45484d),to(#000000));
background-image: -webkit-linear-gradient(top,#45484d,#000000);
background-image: -moz-linear-gradient(top,#45484d,#000000);
background-image: -ms-linear-gradient(top,#45484d,#000000);
background-image: -o-linear-gradient(top,#45484d,#000000);
background-image: linear-gradient(to bottom,#45484d,#000000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#45484d,endColorstr=#000000);
}
.wp_download_btn:hover {
border: 1px solid #151617;
background-color: #2d2f32;
background-image: -webkit-gradient(linear,left top,left bottom,from(#2d2f32),to(#1a1a1a));
background-image: -webkit-linear-gradient(top,#2d2f32,#1a1a1a);
background-image: -moz-linear-gradient(top,#2d2f32,#1a1a1a);
background-image: -ms-linear-gradient(top,#2d2f32,#1a1a1a);
background-image: -o-linear-gradient(top,#2d2f32,#1a1a1a);
background-image: linear-gradient(to bottom,#2d2f32,#1a1a1a);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2d2f32,endColorstr=#1a1a1a);
}
.wp_download_btn svg {
vertical-align: middle;
}";
$image = '<svg width="200" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 722.3 164.7" xml:space="preserve"><style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;}
.st2{font-family:"Marion-Regular";}
.st3{font-size:60px;}
.st4{font-family:"PTSerif-Bold";}
.st5{font-size:55px;}
</style><path class="st0" d="M9.3 82.4c0-39.4 31.7-71.1 71-71.1 39.4 0 71 31.8 71 71.6 0 39-32 70.9-71.1 70.9C40.9 153.7 9.3 121.9 9.3 82.4zM80.1 14.4c-38 0.1-68 30.7-67.9 69.3 0.1 36.4 31.4 67.1 68.4 67 37.8-0.1 67.8-31 67.8-69.6C148.2 44.8 117.1 14.3 80.1 14.4zM432.8 122.4c-0.7 9.5-2.3 13.6 7 17.1 -7.6 0-15.3 0-22.9 0 0-0.3-0.1-0.5-0.1-0.8 0.7-0.3 1.4-0.7 2.1-0.8 3.4-0.5 5.2-2.6 5.3-5.8 0.2-8.1 0.1-16.2 0-24.3 -0.1-4.6-3.8-5.5-8-6.4 0.9-0.7 1.3-1.3 1.7-1.3 8.4 0.1 16.8 0 25.1 0.6 4.6 0.3 8.5 2.8 10.1 7.7 1.2 3.7 0.6 7.4-2.2 10.1 -2.1 2-5 3.3-8 5.3 4.8 4.7 8.4 10.7 15.2 13.3 5.5 2.2 8.9 0.4 9.3-5.5 0.5-7.5 0.1-15 0.2-22.5 0.1-5-3-7-7.9-7.4 0.2-0.4 0.4-0.8 0.6-1.3 1.3-0.1 2.6-0.3 3.9-0.3 8.8 0 17.6 0.1 26.5-0.1 3.5-0.1 5.1 0.9 4.8 4.6 -0.2 2 0 4 0 6 -0.5 0-0.9 0.1-1 0 -3.9-6.5-8.8-8.7-16.4-7.1 -0.9 0.2-2.1 1.5-2.2 2.4 -0.3 3.6-0.1 7.2-0.1 10.6 6.6 1.7 8.3 0.8 11.8-7 0 6.8 0 12.4 0 18.1 -0.3 0.1-0.5 0.1-0.8 0.2 -0.3-1-0.6-1.9-0.8-2.9 -1-4.3-4.6-3.8-7.6-3.9 -3.6-0.1-2.3 2.9-2.5 4.8 -0.1 1.1-0.1 2.3 0 3.5 0.3 5.9 1.8 7.3 7.7 7.4 1 0 2 0 3 0 5.8-0.1 5.8-0.1 11.7-8.1 -0.3 4-0.2 7-0.8 9.8 -0.2 0.8-2 1.9-3 2 -14.6 0.1-29.2 0.2-43.8 0 -1.4 0-3.2-1.1-4.2-2.3 -3.3-3.8-6.3-7.9-9.6-11.8C435.8 124.9 434.6 124 432.8 122.4zM432.2 119.7c2.4 0 4.1 0.1 5.8 0 3.3-0.2 5.7-1.9 6.8-5.1 1.2-3.4 1-7.1-2.1-9 -2.6-1.6-6.1-1.6-9.3-2.1 -0.3 0-1.2 1.5-1.3 2.3C432.1 110.2 432.2 114.6 432.2 119.7zM277.5 100.7c7.8 0 15.6-0.2 23.4 0.1 6.5 0.3 11 4.2 11.9 9.5 0.8 4.8-2.2 8.8-8.5 11.5 -0.8 0.3-1.5 0.8-3.3 1.8 5.3 4.6 9.6 9.6 15 12.9 7.5 4.6 13 1.1 13.2-7.6 0.1-6.1 0-12.1 0-18.2 0-4.7-0.9-8.7-6.9-9.3 0.1-0.4 0.3-0.9 0.4-1.3 9.7 0.5 19.5 0.1 28.9 1.6 10.4 1.7 15.8 9.8 15.1 19.6 -0.7 9.8-8.1 17.4-18.5 17.8 -12.7 0.5-25.4 0.4-38.2 0.3 -1.6 0-3.5-1.2-4.6-2.5 -3.4-3.9-6.5-8.1-9.8-12.1 -0.7-0.8-2.1-1.1-3.2-1.7 -0.4 1-1.1 2-1.1 3 0 2.6-0.3 5.5 0.8 7.7 1.1 2.2 3.7 3.7 5.5 5.3 -6.4 0-13.3 0-20.3 0 7.9-2 6.6-8.4 6.7-14.1 0.1-4.9 0.2-9.8-0.1-14.7C283.8 106.1 283.3 101.7 277.5 100.7zM336.5 118.9C336.5 118.9 336.5 118.9 336.5 118.9c0 4.2-0.3 8.4 0.2 12.5 0.2 1.9 1.9 4.4 3.5 5 4.7 1.8 11.9-0.7 14.7-5 4.5-6.8 4.5-14.3 1.1-21.4 -3.1-6.5-9.4-7.3-15.9-7.3 -2.6 0-3.6 0.9-3.6 3.6C336.6 110.6 336.5 114.8 336.5 118.9zM291.2 111.5C291.2 111.5 291.2 111.5 291.2 111.5c0 1.9-0.1 3.8 0.1 5.6 0.1 0.9 0.8 2.5 1.1 2.4 3.1-0.2 6.4 0 9.1-1.2 3.2-1.4 3.8-4.8 3.4-8.2 -0.4-3.5-2.4-5.8-5.7-6.8 -5.9-1.9-7.9-0.5-7.9 5.6C291.2 109.8 291.2 110.6 291.2 111.5zM212.1 88.7c6.4 0 12.9 0 19.3 0 -9.7 1.6-10.5 9.9-12.9 16.9 -3.7 10.7-7 21.4-10.5 32.1 -0.4 1.3-1 2.5-2.5 3.8 -2-6.1-3.9-12.2-5.9-18.4 -1.9-6-3.9-12-5.9-17.9 -0.5 0-1 0-1.5 0 -2 6.1-4 12.1-6 18.2 -2 6-4 12-6.9 18.1 -0.6-1.5-1.2-3-1.7-4.5 -3.8-11.8-7.7-23.6-11.4-35.5 -1.9-5.9-3.8-11.7-11.3-12.7 8.1 0 16.3 0 24.4 0 0 0.3 0 0.7-0.1 0.7 -7.1 1.8-7.9 3.2-5.5 10.3 2.5 7.7 5.2 15.5 7.8 23.2 0.4 0 0.9 0 1.3 0.1 4-11.5 7.9-22.9 11.9-34.4 0.5-0.1 1.1-0.1 1.6-0.2 3.9 11.5 7.8 23.1 12.1 36 1.2-2.8 1.9-4.4 2.4-6 2.2-6.3 4.3-12.5 6.4-18.8C219.4 92.8 218.7 91.5 212.1 88.7zM387.2 118.1c0 3.2-0.1 6.2 0 9.2 0.4 7.7 1.1 8.4 8.4 10.7 0.3 0.1 0.5 0.6 1.4 1.5 -9.5 0-18.4 0-27.5 0 0.4-0.8 0.5-1.3 0.6-1.3 7.1-0.7 8.8-5.3 8.7-11.5 -0.2-8.8 0.1-17.6-0.1-26.5 -0.2-7.7-0.9-8.3-8.2-10.4 -0.3-0.1-0.6-0.5-1.1-1 0.6-0.4 1.1-0.8 1.6-0.8 9.8 0.1 19.7-0.3 29.5 0.6 8.4 0.7 13.2 7.3 12.7 15.3 -0.4 6.5-5.1 11.5-12.6 12.8C396.4 117.5 392.1 117.6 387.2 118.1zM387.1 113.2c2.7 0 5 0.1 7.3 0 6.1-0.2 9.6-3.8 9.9-9.8 0.4-8.3-7.2-13.9-15.4-11.3 -0.7 0.2-1.6 1.3-1.7 2C387 100.2 387.1 106.4 387.1 113.2zM249.3 141c-16.2 0-27.3-13.8-22.3-27.7 3.4-9.5 13-15 25.1-14.3 9.7 0.5 18.3 7.7 20.4 17.1 2.6 11.7-7.2 24-19.8 24.9C251.6 141.1 250.4 141 249.3 141zM265 121.4c0-9.9-4.2-16.9-10.5-19 -6.3-2.2-13-0.3-16.6 5 -4.9 7.3-5.2 15.1-1.4 23 3.6 7.5 12.6 10.3 19.9 6.3C263 133 264.7 126.7 265 121.4zM510 137.9c-1 1.2-1.9 2.3-3.6 4.3 0-6.3 0-11.4 0-16.6 0.3-0.1 0.6-0.2 1-0.3 0.5 1 1 2 1.4 3 2.1 5.7 6.1 9 12.2 9.5 3.2 0.3 6.2-0.7 7.5-3.9 1.4-3.4-0.5-5.9-3.3-7.6 -3-1.8-6.1-3.2-9.2-4.8 -1.8-0.9-3.6-1.8-5.2-3 -3.8-2.9-5.5-6.7-4.4-11.4 1-4.6 4.5-7.1 8.8-7.9 2.7-0.5 5.7 0 8.5 0.4 2.5 0.4 5.2 3.8 7.5-0.5 0 4.5 0 8.9 0 13.4 -0.4 0.1-0.7 0.1-1.1 0.2 -0.6-1.5-1.2-3-1.9-4.5 -2.4-5-7.6-7.4-12.1-5.5 -4.3 1.8-5.1 6.1-1.2 8.7 3.6 2.4 7.6 4.1 11.4 6.1 8 4.1 10.8 9.7 8 16.2 -2.7 6.3-11.2 9.6-18.5 7C513.9 139.9 512 138.9 510 137.9zM565.2 101.2c0.9-0.8 1.7-1.7 3.4-3.2 0 5.4 0 9.9 0 14.4 -0.3 0.1-0.6 0.2-1 0.3 -0.6-1.2-1.2-2.5-1.7-3.7 -2-5-6.8-8-11.2-6.6 -1.8 0.6-4.3 2.4-4.4 3.9 -0.2 1.7 1.2 4.4 2.8 5.5 3.3 2.3 7.1 3.8 10.7 5.6 8 4 10.8 9.5 8.1 15.8 -2.8 6.7-11.2 10-18.7 7.4 -2-0.7-3.9-1.8-5.9-2.8 -0.9 1.1-1.7 2.2-3.3 4.4 0-6.4 0-11.6 0-16.7 0.3-0.1 0.6-0.2 1-0.3 0.4 1.1 0.8 2.1 1.2 3.2 2.1 5.7 6.7 9.2 12.4 9.3 3.2 0.1 6.2-0.8 7.4-4.2 1.2-3.3-0.7-5.7-3.3-7.3 -3.6-2.1-7.5-3.8-11.2-5.7 -4-2.1-7.4-4.7-7.9-9.6 -1-8.7 7.3-14.6 16.9-11.8C562 99.7 563.5 100.5 565.2 101.2zM43 54.1c2.3-0.2 4.2-0.1 5.8-0.7 1.2-0.4 2.9-1.7 3-2.7 0.2-2.1-1.6-2.6-3.5-2.5 -6 0.3-12 0.6-18.1 0.4 9-13.9 21.6-22.5 37.7-25.7 19.6-3.9 37.1 0.8 52.7 13.9 -10.5 3.9-12.8 10.3-7.7 20 1.4 2.6 3 5.1 4.4 7.6 3.9 7.1 5.3 14.7 3 22.6 -3 10.4-6.1 20.8-10 31.2 -7.1-21.1-14.2-42.3-21.5-63.9 2.2-0.3 4-0.5 5.8-0.7 1.9-0.2 3.7-1 3.1-3 -0.3-1-2.2-2.2-3.5-2.2 -10.2-0.2-20.4-0.2-30.5 0 -1.2 0-2.3 1.5-3.5 2.2 1 1 2 2.9 2.9 2.8 4.9-0.4 6.6 2.4 7.8 6.5 1.9 6 4.3 11.9 6.4 17.9 0.4 1.2 0.6 2.7 0.3 3.9 -3.9 12.2-8 24.3-12.1 36.4 -0.1 0.3-0.4 0.5-0.8 1C57.5 97.3 50.4 75.9 43 54.1zM100.3 140.2c-12.4 4.1-24.5 4.3-37.1 0.9 6-17.6 11.9-34.8 18.2-53C87.8 105.9 94 122.8 100.3 140.2zM53.3 137.1c-30.7-14.8-41.6-52.4-28.7-78.7C34.2 84.6 43.6 110.5 53.3 137.1zM111.2 134.9c3.6-10.4 6.9-20.1 10.2-29.8 3.1-9 6.2-17.9 9.4-26.9 2.6-7.5 4-15.1 3.3-23.2C147.9 77.5 142.3 116.5 111.2 134.9z"/><rect x="576" y="99" class="st1" width="197.9" height="95.4"/><text transform="matrix(1 0 0 1 576.0038 140.2977)" class="st0 st2 st3">.ORG</text><rect x="162.2" y="21.9" class="st1" width="409.2" height="60.1"/><text transform="matrix(1 0 0 1 162.1733 63.2672)" class="st0 st4 st5">Download from</text></svg>';
return '<style>'
. $stylesheet .
'</style>
<a
class="wp_download_btn"
href="' . $attr['url'] . '"
download
>'
. $image .
'</a>';
}
add_shortcode( 'wp-download-btn', 'wp_download_btn' ); // Create shortcode
add_filter('widget_text', 'do_shortcode'); // Allow shortcodes in widgets
The string add_shortcode() are creates the shortcode [wp-download-btn]. The string add_filter() is needed to allow the shortcodes in widgets.
All done, and now we can use the simple wp-shortcode [wp-download-btn url=“#”]. Just put this shortcode in any place of your WordPress website, like post, sidebar or footer and your WordPress download button will be displayed. But do not forget to replace this # by your link to the file for downloading.
Example:
[wp-download-btn url="https://example.com/file.zip"]
and result:
P.S. If you use any other CMS instead of WordPress then you must remove the string with creating shortcode and filter:
add_shortcode('github_button', 'github_button'); // Create shortcode
add_filter('widget_text', 'do_shortcode'); // Allow shortcodes in widgets
And instead of using wp-shortcode you must call the function with attribute url to display the button.
Here’s an example of this button from CodePen.io:
See the Pen CSS3 Gradient Active WordPress Download Button by Arthur Gareginyan (@berserkr) on CodePen.
The code of this button are under the MIT license and can be found at Codepen.io.
Arthur Gareginyan
Arthur is a designer and full stack software engineer. He is the founder of Space X-Chimp and the blog My Cyber Universe. His personal website can be found at arthurgareginyan.com.
