"buttion transform skew"
Bootstrap 4.1.1 Snippet by ranjit1602

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main-title"> <h1><span>Alfa <strong>Pricing</strong></span></h1> </div>
.main-title { transform: skew(-15deg); -o-transform: skew(-15deg); -moz-transform: skew(-15deg); -webkit-transform: skew(-15deg); width:250px; } h1, h1::before, .timelineFlat.timelineFlatBlog .item .post_date, .timelineFlat .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, #forms input.send:hover, #comment-form input.send:hover, .navbar-default .navbar-toggle .icon-bar, .bar-color, .team h6, .price-title, .team h6::before, .tooltip-content, .our-testimonials h3, footer .social::before, .color-switcher .color-switcher-title::after, .btn.read-post, .our-testimonials h3::before { background-color: #de3926; } h1, h1::before, .timelineFlat.timelineFlatBlog .item .post_date, .timelineFlat .mCS-light-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, #forms input.send:hover, #comment-form input.send:hover, .navbar-default .navbar-toggle .icon-bar, .bar-color, .team h6, .price-title, .team h6::before, .tooltip-content, .our-testimonials h3, footer .social::before, .color-switcher .color-switcher-title::after, .btn.read-post, .our-testimonials h3::before { background-color: #de3926; } h1::before { position: absolute; content: ''; top: 6px; left: -8px; width: 60%; height: 100%; background-color: #3498db; z-index: -2; } h1::after { position: absolute; content: ''; top: 6px; left: -8px; width: 60%; height: 100%; background: black; opacity: 0.5; z-index: -2; }

Related: See More


Questions / Comments: