DecentThemes Action Shortcode For Blog Posts

dt-blog-action.php

function dt_blog_action_styles() { ?>
	<style>
		.dt-blog-action {
			text-align: center;
			padding: 25px;
		}

		.dt-blog-action > a {
			position: relative;
			overflow: hidden;
			display: inline-block;
			color: #fff;
			background: #0e83cd;
			font-family: inherit;
			text-transform: uppercase;
			font-weight: 700;
			letter-spacing: 1px;
			margin: 15px;
			padding: 25px 100px 25px 40px;
			border: none;
			outline: none;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			transition: all 0.3s;
		}
		.dt-blog-action > a:before {
			position: absolute;
			font-family: FontAwesome;
			font-size: 140%;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			line-height: 3.5;
			speak: none;
			height: 100%;
			width: 60px;
			top: 0;
			left: auto;
			right: 10px;
			z-index: 2;
			-webkit-font-smoothing: antialiased;
		}
		.dt-blog-action > a:after {
			content: '';
			position: absolute;
			width: 35%;
			height: 200%;
			background: rgba(255,255,255,0.1);
			z-index: 1;
			right: 0;
			top: 0;
			margin: -5px 0 0 -5px;
			-webkit-transform-origin: 0 0;
			-webkit-transform: rotate(-20deg);
			-moz-transform-origin: 0 0;
			-moz-transform: rotate(-20deg);
			-ms-transform-origin: 0 0;
			-ms-transform: rotate(-20deg);
			transform-origin: 0 0;
			transform: rotate(-20deg);
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			transition: all 0.3s;
		}
		.dt-blog-action > a:hover {
			background-color: #0F6EAB;
		}
		.dt-blog-action > a:hover:after {
			width: 40%;
		}
		.dt-blog-action > a.dt-download-btn:before {
			content: '\f019'
		}
		.dt-blog-action > a.dt-demo-btn:before {
			content: '\f129'
		}
		.dt-blog-action > a.dt-download-btn {
			background-color: #2ecc71;
		}
		.dt-blog-action > a.dt-download-btn:hover {
			background-color: #24b662;
		}
	</style>
<?php
}

add_action('wp_head', 'dt_blog_action_styles', 10);

function dt_blog_link_action($atts) {
	$atts = shortcode_atts( array(
		'demo'		=> '#',
		'download'	=> '#'
	), $atts, 'dt-action-link' );

	ob_start();
?>
	<div class="dt-blog-action">
		<a href="<?php echo esc_url( $atts['demo'] ); ?>" class="dt-demo-btn"><?php _e( 'Demo &amp; Info', 'twentysixteen' ); ?></a>
		<a href="<?php echo esc_url( $atts['download'] ); ?>" class="dt-download-btn"><?php _e( 'Download', 'twentysixteen' ); ?></a>
	</div><!-- /.dt-blog-action -->
<?php
	return ob_get_clean(); 
}
add_shortcode( 'dt-action-link', 'dt_blog_link_action' );

// Example: [dt-action-link demo="#demo-and-info" download="#download"]