{"id":450,"date":"2014-03-29T04:20:39","date_gmt":"2014-03-29T04:20:39","guid":{"rendered":"http:\/\/www.webtipblog.com\/?p=450"},"modified":"2014-03-30T18:35:35","modified_gmt":"2014-03-30T18:35:35","slug":"scroll-back-top-wordpress-plugin-button-designs","status":"publish","type":"post","link":"https:\/\/www.webtipblog.com\/scroll-back-top-wordpress-plugin-button-designs\/","title":{"rendered":"Scroll Back to Top WordPress Plugin Button Designs"},"content":{"rendered":"<p>The WordPress Scroll Back to Top plugin is extremely flexible and can accommodate nearly any design to match an existing website. \u00a0By adjusting a few simple configuration options you can easily adapt the plugin to your site in minutes. \u00a0To give you some inspiration for different scroll to top button ideas and to illustrate how simple it is to change the design I have a few screenshots of the button in action along with the settings needed to execute the design.<!--more--><\/p>\n<p><a href=\"http:\/\/www.webtipblog.com\/scroll-back-top-wordpress-plugin\/\">Check out my support page<\/a><\/p>\n<p><a href=\"http:\/\/wordpress.org\/plugins\/scroll-back-to-top\/\">Check out the WordPress Scroll Back to Top plugin page<\/a><\/p>\n<p>&nbsp;<\/p>\n<h4>Simple Grey Button Docked to the Right of the Screen<\/h4>\n<div class=\"article-thumbnail\"><a href=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.18.39-PM.png\"><img loading=\"lazy\" src=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.18.39-PM-300x32.png\" alt=\"Light Grey Docked Right Button\" width=\"300\" height=\"32\" class=\"alignnone size-medium wp-image-448\" srcset=\"https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.18.39-PM-300x32.png 300w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.18.39-PM-1024x110.png 1024w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.18.39-PM-624x67.png 624w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/div>\n<ul>\n<li>Width: 35px<\/li>\n<li>Height: 35px<\/li>\n<li>Background Color: #DDDDDD<\/li>\n<li>Hover Color: #CCCCCC<\/li>\n<li>Foreground Color: #777777<\/li>\n<li>Opacity: 100%<\/li>\n<li>Border Radius: 5px<\/li>\n<li>Horizontal Alignment: Right<\/li>\n<li>Vertical Alignment: Bottom<\/li>\n<li>Horizontal Distance from Edge: 0px<\/li>\n<li>Vertical Distance from Edge: 30px<\/li>\n<li>Label Type: (arrow)<\/li>\n<li>Icon Size: 2<\/li>\n<li>Custom Label Text: NA<\/li>\n<li>Font Size: NA<\/li>\n<li>Scroll Duration: 500ms<\/li>\n<li>Fade Duration: 500ms<\/li>\n<\/ul>\n<h4>Grey circle<\/h4>\n<div class=\"article-thumbnail\"><a href=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.20.44-PM.png\"><img loading=\"lazy\" src=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.20.44-PM-300x31.png\" alt=\"Grey Circle Button\" width=\"300\" height=\"31\" class=\"alignnone size-medium wp-image-449\" srcset=\"https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.20.44-PM-300x31.png 300w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.20.44-PM-1024x109.png 1024w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.20.44-PM-624x66.png 624w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/div>\n<ul>\n<li>Width: 76px<\/li>\n<li>Height: 76px<\/li>\n<li>Background Color: #777777<\/li>\n<li>Hover Color: #888888<\/li>\n<li>Foreground Color: #EEEEEE<\/li>\n<li>Opacity: 100%<\/li>\n<li>Border Radius: 38px<\/li>\n<li>Horizontal Alignment: Right<\/li>\n<li>Vertical Alignment: Bottom<\/li>\n<li>Horizontal Distance from Edge: 30px<\/li>\n<li>Vertical Distance from Edge: 30px<\/li>\n<li>Label Type: (arrow)<\/li>\n<li>Icon Size: 4<\/li>\n<li>Custom Label Text: NA<\/li>\n<li>Font Size: NA<\/li>\n<li>Scroll Duration: 500ms<\/li>\n<li>Fade Duration: 500ms<\/li>\n<\/ul>\n<h4>Blue Square<\/h4>\n<div class=\"article-thumbnail\"><a href=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.14.31-PM.png\"><img loading=\"lazy\" src=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.14.31-PM-300x31.png\" alt=\"Blue Square Button\" width=\"300\" height=\"31\" class=\"alignnone size-medium wp-image-446\" srcset=\"https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.14.31-PM-300x31.png 300w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.14.31-PM-1024x108.png 1024w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.14.31-PM-624x65.png 624w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/div>\n<ul>\n<li>Width: 50px<\/li>\n<li>Height: 50px<\/li>\n<li>Background Color: #3BB8C6<\/li>\n<li>Hover Color: #57BBC6<\/li>\n<li>Foreground Color: #EEEEEE<\/li>\n<li>Opacity: 100%<\/li>\n<li>Border Radius: 10px<\/li>\n<li>Horizontal Alignment: Right<\/li>\n<li>Vertical Alignment: Bottom<\/li>\n<li>Horizontal Distance from Edge: 30px<\/li>\n<li>Vertical Distance from Edge: 30px<\/li>\n<li>Label Type: (arrow)<\/li>\n<li>Icon Size: 3<\/li>\n<li>Custom Label Text: NA<\/li>\n<li>Font Size: NA<\/li>\n<li>Scroll Duration: 500ms<\/li>\n<li>Fade Duration: 500ms<\/li>\n<\/ul>\n<h4>Grey Square<\/h4>\n<div class=\"article-thumbnail\"><a href=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.16.33-PM.png\"><img loading=\"lazy\" src=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.16.33-PM-300x31.png\" alt=\"Grey Square Button\" width=\"300\" height=\"31\" class=\"alignnone size-medium wp-image-447\" srcset=\"https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.16.33-PM-300x31.png 300w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.16.33-PM-1024x109.png 1024w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.16.33-PM-624x66.png 624w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n<\/div>\n<ul>\n<li>Width: 50px<\/li>\n<li>Height: 50px<\/li>\n<li>Background Color: #777777<\/li>\n<li>Hover Color: #888888<\/li>\n<li>Foreground Color: #EEEEEE<\/li>\n<li>Opacity: 100%<\/li>\n<li>Border Radius: 10px<\/li>\n<li>Horizontal Alignment: Right<\/li>\n<li>Vertical Alignment: Bottom<\/li>\n<li>Horizontal Distance from Edge: 30px<\/li>\n<li>Vertical Distance from Edge: 30px<\/li>\n<li>Label Type: (arrow)<\/li>\n<li>Icon Size: 3<\/li>\n<li>Custom Label Text: NA<\/li>\n<li>Font Size: NA<\/li>\n<li>Scroll Duration: 500ms<\/li>\n<li>Fade Duration: 500ms<\/li>\n<\/ul>\n<h4>Red Button Docked to Bottom of Screen<\/h4>\n<div class=\"article-thumbnail\"><a href=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.12.20-PM.png\"><img loading=\"lazy\" src=\"http:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.12.20-PM-300x32.png\" alt=\"Red Docked Bottom Button\" width=\"300\" height=\"32\" class=\"alignnone size-medium wp-image-445\" srcset=\"https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.12.20-PM-300x32.png 300w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.12.20-PM-1024x112.png 1024w, https:\/\/www.webtipblog.com\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-27-at-10.12.20-PM-624x68.png 624w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/div>\n<ul>\n<li>Width: 120px<\/li>\n<li>Height: 30px<\/li>\n<li>Background Color: #DD4242<\/li>\n<li>Hover Color: #C63D3D<\/li>\n<li>Foreground Color: #EEEEEE<\/li>\n<li>Opacity: 100%<\/li>\n<li>Border Radius: 10px<\/li>\n<li>Horizontal Alignment: Center<\/li>\n<li>Vertical Alignment: Bottom<\/li>\n<li>Horizontal Distance from Edge: 0px<\/li>\n<li>Vertical Distance from Edge: 0px<\/li>\n<li>Label Type: Custom Text<\/li>\n<li>Icon Size: NA<\/li>\n<li>Custom Label Text: Scroll to Top<\/li>\n<li>Font Size: 12<\/li>\n<li>Scroll Duration: 500ms<\/li>\n<li>Fade Duration: 500ms<\/li>\n<\/ul>\n<p><a href=\"http:\/\/www.webtipblog.com\/scroll-back-top-wordpress-plugin\/\">Check out my support page<\/a><\/p>\n<p><a href=\"http:\/\/wordpress.org\/plugins\/scroll-back-to-top\/\">Check out the WordPress Scroll Back to Top plugin page<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The WordPress Scroll Back to Top plugin is extremely flexible and can accommodate nearly any design to match an existing website. \u00a0By adjusting a few simple configuration options you can easily adapt the plugin to your site in minutes. \u00a0To give you some inspiration for different scroll to top button ideas and to illustrate how [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":449,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,2,18],"tags":[28,27,23,19,26,10],"_links":{"self":[{"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/posts\/450"}],"collection":[{"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/comments?post=450"}],"version-history":[{"count":8,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/posts\/450\/revisions"}],"predecessor-version":[{"id":482,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/posts\/450\/revisions\/482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/media\/449"}],"wp:attachment":[{"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/media?parent=450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/categories?post=450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webtipblog.com\/wp-json\/wp\/v2\/tags?post=450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}