Jump to content
Sign in to follow this  
Gavin_

help needed with styling a button

Recommended Posts

Gavin_

Hi good people of pagelines - hope you are all well. I have got this CSS for a button and i want to replace the pagelines default with this. but when i have tried to replace i get conflicts with hover and outlines etc. i'd also like to keep the arrow you have if possible. the button i'd like to replace is a.pagelines-blink.blue-blink, a.soapbox_link.soapbox_callout here's my code .button { border-top: 1px solid #833692; background: #3b033a; background: -webkit-gradient(linear, left top, left bottom, from(#b536b5), to(#3b033a)); background: -moz-linear-gradient(top, #b536b5, #3b033a); padding: 10px 20px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 15px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .button:hover { border-top-color: #39033b; background: #39033b; color: #ccc; } .button:active { border-top-color: #3b033b; background: #3b033b; } thanks

Share this post


Link to post
Share on other sites
cmunns

Hey Gavin you got that link for us? It's probably the parent or child element that is adding the borders did you try inspecting with browser dev tool?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×