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 1 year, 3 months ago.

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

    AsktheDentist
    Participant

    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

    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>


    Coming Soon: Simple PRO Genesis Themes
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

    #77978

    AsktheDentist
    Participant

    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

    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/


    Coming Soon: Simple PRO Genesis Themes
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

    #81289

    AsktheDentist
    Participant

    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.