Display a Custom CSS Button on Page?

  • Resolved SJS719

    (@sjs719)


    9 years, 5 months ago

    I am trying to create a CSS button with some pseudo elements that I found here: https://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/

    I have the following code in my Child Themes style.css:

    .a_mybutton {
	background-color:#3bb3e0;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	border-left:solid 1px #2ab7ec;
	margin-left:35px;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_mybutton:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.a_mybutton::before {
	content:"·";
	width:35px;
	max-height:29px;
	height:100%;
	position:absolute;
	display:block;
	padding-top:8px;
	top:0px;
	left:-36px;
	font-size:16px;
	font-weight:bold;
	color:#8fd1ea;
	text-shadow:1px 1px 0px #07526e;
	border-right:solid 1px #07526e;
	background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_mybutton:active::before {
	top:-3px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

    But how do I call this custom button to display in either my post content or sidebar? I have tried making a shortcode of this button by writing the following into my functions.php:

    function mybutton($atts, $text = ''){    

    extract(shortcode_atts(array(
        'text' => '',
        'link' => ''
    ), $atts)); 

   $html = '<a href="' . $link . '"><div class="myButton">' . $text . '</div></a>';
    return $html;
}

add_shortcode('mybutton', 'myButton');

    But this just adds a unstyled link of the text I enter, it doesn’t use the custom CSS styling.

    Am I just missing something while trying to create a shortcode? Or do I need to call the CSS button using a different method?

    Thanks!

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

  • Well, at first glance it appears you are not targeting the right class with your CSS.

    Your setting class="myButton" in your HTML but then in your CSS, you are trying to style class="a_mybutton"

    Thread Starter SJS719

    (@sjs719)

    I thought I needed to use “a_” for the anchor tag? Should I just be using “mybutton” in the css?

    I thought I needed to use “a_” for the anchor tag?

    A couple things wrong with this: If you are trying to target only anchors that have that class, you would use a period like so: a.myButton { styles here }
    Though this will not work for you because you are assigning the class to a div inside the anchor, meaning the anchor itself does not have that class and your CSS will not work. You have a few options depending on how you’d like to handle it.

    1. Keep your current HTML but update your CSS to target .myButton
    2. Move the class on that div to the anchor instead and update your CSS to a.myButton instead of the underscore you currently have.

    Thread Starter SJS719

    (@sjs719)

    That is what I thought originally but the author of this code had it ‘a_’ instead of ‘a.’

    But thank you for your help Craig, I got it working by just dropping the anchor tag.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Display a Custom CSS Button on Page?’ is closed to new replies.