Read More Button

Hi,

I’ve read how to make a “Read More” link. I was wondering how I would make my link a button instead like the others throughout my blog.

I used the code below to make the buttons on my posts page:

.read-more {
font-family: sans-serif;
display: inline-block;
line-height: 1em;
padding: 6px 13px;
margin:0 .6em 1.5em 0;
border: 1px solid #a2547a;
border-bottom-color: #65209a;
color: white !important;
text-align: center;
text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);
text-decoration: none !important;

/*Border radius*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/*Background*/
background-color: #a2547a; /*Fallback*/
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(.2, #a2547a),
color-stop(1, #a2547a)
);
background: -moz-linear-gradient(
center top,
#a2547a 20%,
#a2547a 100%
);

/*Box shadow*/
-webkit-box-shadow: inset 0 1px 0 hsla(230,230,250) /*Top*/,
inset 0 0 2px hsla(230,230,250) /*Shine*/,
0 1px 2px hsla(230,230,250) /*Shadow*/;
-moz-box-shadow: inset 0 1px 0 hsla(230,230,250) /*Top*/,
inset 0 0 2px hsla(230,230,250) /*Shine*/,
0 1px 2px hsla(230,230,250) /*Shadow*/;
box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/,
inset 0 0 2px hsla(230,230,250) /*Shine*/,
0 1px 2px hsla(230,230,250) /*Shadow*/;
}

How can I manage the same within your widget? Thank you.

http://ww.wp.xz.cn/extend/plugins/feature-a-page-widget/