Button Style 1
<section class="buttons dt-section">
<div class="container">
<div class="buttons-block">
<div class="buttons1">
<div class="row gy-5">
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-primary btn-sm btn-custom1">Button
</a>
<a title="Button-medium" href="#" class="btn btn-primary btn-md btn-custom1">Button
</a>
<a title="Button-large" href="#" class="btn btn-primary btn-lg btn-custom1">Button
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-secondary btn-sm btn-custom1">Button
</a>
<a title="Button-medium" href="#" class="btn btn-secondary btn-md btn-custom1">Button
</a>
<a title="Button-large" href="#" class="btn btn-secondary btn-lg btn-custom1">Button
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-dark btn-sm btn-custom1">Button
</a>
<a title="Button-medium" href="#" class="btn btn-dark btn-md btn-custom1">Button
</a>
<a title="Button-large" href="#" class="btn btn-dark btn-lg btn-custom1">Button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 2
<section class="buttons dt-section">
<div class="container">
<div class="buttons-block">
<div class="buttons2">
<div class="row gy-5">
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-primary btn-sm btn-custom2">Button
</a>
<a title="Button-medium" href="#" class="btn btn-primary btn-md btn-custom2">Button
</a>
<a title="Button-large" href="#" class="btn btn-primary btn-lg btn-custom2">Button
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-secondary btn-sm btn-custom2">Button
</a>
<a title="Button-medium" href="#" class="btn btn-secondary btn-md btn-custom2">Button
</a>
<a title="Button-large" href="#" class="btn btn-secondary btn-lg btn-custom2">Button
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-dark btn-sm btn-custom2">Button
</a>
<a title="Button-medium" href="#" class="btn btn-dark btn-md btn-custom2">Button
</a>
<a title="Button-large" href="#" class="btn btn-dark btn-lg btn-custom2">Button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 3
<section class="buttons dt-section">
<div class="container">
<div class="buttons-block">
<div class="buttons3">
<div class="row gy-5">
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-primary btn-sm btn-custom3 ">Button
</a>
<a title="Button-medium" href="#" class="btn btn-primary btn-md btn-custom3 ">Button
</a>
<a title="Button-large" href="#" class="btn btn-primary btn-lg btn-custom3 ">Button
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-secondary btn-sm btn-custom3">Button
</a>
<a title="Button-medium" href="#" class="btn btn-secondary btn-md btn-custom3">Button
</a>
<a title="Button-large" href="#" class="btn btn-secondary btn-lg btn-custom3">Button
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-dark btn-sm btn-custom3">Button
</a>
<a title="Button-medium" href="#" class="btn btn-dark btn-md btn-custom3">Button
</a>
<a title="Button-large" href="#" class="btn btn-dark btn-lg btn-custom3">Button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 4
<section class="buttons dt-section">
<div class="container">
<div class="buttons-block">
<div class="buttons4">
<div class="row gy-5">
<div class="col-md-4 col-sm-6">
<div class="button-block1">
<a title="Button-small" href="#" class="btn btn-primary btn-sm btn-custom4">Button
</a>
<a title="Button-medium" href="#" class="btn btn-primary btn-md btn-custom4">Button
</a>
<a title="Button-large" href="#" class="btn btn-primary btn-lg btn-custom4">Button
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block1">
<a title="Button-small" href="#" class="btn btn-secondary btn-sm btn-custom4">Button
</a>
<a title="Button-medium" href="#" class="btn btn-secondary btn-md btn-custom4">Button
</a>
<a title="Button-large" href="#" class="btn btn-secondary btn-lg btn-custom4">Button
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block1">
<a title="Button-small" href="#" class="btn btn-dark btn-sm btn-custom4">Button
</a>
<a title="Button-medium" href="#" class="btn btn-dark btn-md btn-custom4">Button
</a>
<a title="Button-large" href="#" class="btn btn-dark btn-lg btn-custom4">Button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 5
<section class="buttons dt-section">
<div class="container">
<div class="buttons-block">
<div class="buttons5">
<div class="row gy-5">
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read primary btn-sm btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
<a class="read primary btn-md btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
<a class="read primary btn-lg btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read secondary btn-sm btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
<a class="read secondary btn-md btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
<a class="read secondary btn-lg btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read dark btn-sm btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
<a class="read dark btn-md btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
<a class="read dark btn-lg btn-custom5" title="Blog Details" href="#">Button
<span class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="387.5" height="150" viewBox="0 0 387.5 150">
<path data-name="Path 40761" d="M387.5,246.048l-110.947-75v62.069H0v25.862H276.553V321.05Z" transform="translate(0 -171.051)" fill="#130f40" fill-rule="evenodd"/>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>