Title: Subscription widget button appearance
Last modified: August 21, 2016

---

# Subscription widget button appearance

 *  Resolved [John](https://wordpress.org/support/users/johncpatterson/)
 * (@johncpatterson)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/subscription-widget-button-appearance/)
 * Hello!
 * I have been using the Jetpack subscription widget in my sidebar on my website,
   however the button that people click to subscribe is a very simple gray rectangular
   button (not exactly super attractive).
 * However, my theme has some great buttons that I use in my sidebar too. I’m curious,
   how can I replace the default subscribe button with a different nicer looking
   one?
 * I’ll post my website below so that you can see an example of the button I’d like
   to use in the sidebar:
 * Website: [http://www.lifebyjohn.com/test](http://www.lifebyjohn.com/test)
 * Thanks!
 * [http://wordpress.org/extend/plugins/jetpack/](http://wordpress.org/extend/plugins/jetpack/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Jeremy Herve](https://wordpress.org/support/users/jeherve/)
 * (@jeherve)
 * Jetpack Mechanic 🚀
 * [12 years, 11 months ago](https://wordpress.org/support/topic/subscription-widget-button-appearance/#post-3950012)
 * To customize the look of the subscription widget, you can add the following CSS
   to your theme stylesheet, or to your custom CSS editor under Appearance > Edit
   CSS in your dashboard:
 *     ```
       #sidebar .jetpack_subscription_widget input[type="submit"]
   
       .buttons a{
       	margin-right:30px;
       }
       #sidebar .jetpack_subscription_widget input[type="submit"] {
       	background-image: linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
       	background-image: -o-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
       	background-image: -moz-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
       	background-image: -webkit-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
       	background-image: -ms-linear-gradient(top, #b5e0f7 0%, #76c7f1 100%);
       	background-image: -webkit-gradient(
       		linear,
       		left top,
       		left bottom,
       		color-stop(0, #b5e0f7),
       		color-stop(1, #76c7f1)
       	);
       	border:1px solid #1172c1;
   
       	color:#1172c1 !important;
   
       	display:inline-block;
       	height:32px;
       	font:13px/32px 'PTSansBold', arial, helvetica, sans-serif;
       	text-transform:uppercase;
       	text-align:center;
       	text-shadow:0 1px 0 #fff;
       	padding:0 20px;
       	-webkit-border-radius: 2px;
       	-moz-border-radius: 2px;
       	border-radius: 2px;
       	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
       }
   
       #sidebar .jetpack_subscription_widget input[type="submit"]:hover{
       	color:#1172c1 !important;
       	background-image: linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
       	background-image: -o-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
       	background-image: -moz-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
       	background-image: -webkit-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
       	background-image: -ms-linear-gradient(top, #76c7f1 0%, #b5e0f7 100%);
   
       	background-image: -webkit-gradient(
       		linear,
       		left top,
       		left bottom,
       		color-stop(0, #76c7f1),
       		color-stop(1, #b5e0f7)
       	);
       	border:1px solid #1172c1;
       }
       ```
   
 * This CSS actually already exists in your theme stylesheet, but you need to apply
   it to the Subscription button as well. I targeted that button with the following
   CSS:
    `#sidebar .jetpack_subscription_widget input[type="submit"]`
 *  Thread Starter [John](https://wordpress.org/support/users/johncpatterson/)
 * (@johncpatterson)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/subscription-widget-button-appearance/#post-3950072)
 * This worked perfectly, and I appreciate the time you put into making the color
   come out right. I truly appreciate it!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Subscription widget button appearance’ is closed to new replies.

 * ![](https://ps.w.org/jetpack/assets/icon.svg?rev=2819237)
 * [Jetpack - WP Security, Backup, Speed, & Growth](https://wordpress.org/plugins/jetpack/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jetpack/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jetpack/)
 * [Active Topics](https://wordpress.org/support/plugin/jetpack/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jetpack/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jetpack/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [John](https://wordpress.org/support/users/johncpatterson/)
 * Last activity: [12 years, 11 months ago](https://wordpress.org/support/topic/subscription-widget-button-appearance/#post-3950072)
 * Status: resolved