Studiopress Button Design

Community Forums Forums Design Tips and Tricks Studiopress Button Design

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  AsktheDentist 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #77970

    AsktheDentist
    Member
    Post count: 2

    Does anyone out there have some CSS to customize the button on my site to look like the buttons on my.studiopress.com? Like the “Buy Education Theme” button here: http://my.studiopress.com/themes/education/

    Thanks!

    http://markburhennedds.com
    #77976

    Davinder Singh Kainth
    Participant
    Post count: 1291

    Copy btn-green-big class code from theme css file http://www.studiopress.com/wp-content/themes/studiopress_2013/style.css?07182013&ver=3.6.1

    Then use it like <div class=”btn-green-big”>your hyperlink code</div>


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #77978

    AsktheDentist
    Member
    Post count: 2

    Thanks, Davinder!

    Is this the code you mean when you say “the class code”? Sorry, still brand new with CSS.

    .btn-green-big,
    .btn-green-medium,
    .btn-green-small,
    .btn-gray {
    	border-radius: 3px;
    	
    	background-clip: padding-box;
    	-moz-background-clip: padding;
    	-webkit-background-clip: padding-box;
    	
    	box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    	-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    	-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    	
    	border: none !important;
    	color: #fff;
    	cursor: pointer;
    	display: inline-block;
    	font-family: 'museo-sans', sans-serif;
    	font-weight: 500;
    	text-decoration: none;
    }
    #78017

    Davinder Singh Kainth
    Participant
    Post count: 1291

    Following is the basic code, however you need to modify it further to fit your current theme

    .btn-green-big

    {
    border-radius: 3px;
    background-clip: padding-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;

    box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);

    border: none !important;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: ‘museo-sans’, sans-serif;
    font-weight: 500;
    text-decoration: none;

    background-color: #9bc23c;
    border: 2px solid #fff !important;
    border-radius: 4px;

    font-size: 24px;
    font-size: 2.4rem;
    padding: 16px 32px;
    padding: 1.6rem 3.2rem;
    }

    .btn-green-big:hover
    {
    box-shadow: inset 0 3px 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 3px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0 3px 0 rgba(0,0,0,.1);
    background: #87ae28;
    color: #fff;
    }

    Best will be using following tools to generate css for button you want:

    http://css3buttongenerator.com/

    http://www.bestcssbuttongenerator.com/


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #81289

    AsktheDentist
    Member
    Post count: 2

    Just wanted to say this worked out great. Thanks so much for your help, Davinder!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.