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="#">Read More
</a>
<a class="read primary btn-md btn-custom5" title="Blog Details" href="#">Read More
</a>
<a class="read primary btn-lg btn-custom5" title="Blog Details" href="#">Read More
</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="#">Read More
</a>
<a class="read secondary btn-md btn-custom5" title="Blog Details" href="#">Read More
</a>
<a class="read secondary btn-lg btn-custom5" title="Blog Details" href="#">Read More
</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="#">Read More
</a>
<a class="read dark btn-md btn-custom5" title="Blog Details" href="#">Read More
</a>
<a class="read dark btn-lg btn-custom5" title="Blog Details" href="#">Read More
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 6
<section class="buttons dt-section">
<div class="container">
<div class="buttons-block">
<div class="buttons6">
<div class="row gy-5">
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read primary btn-sm btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
<a class="read primary btn-md btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
<a class="read primary btn-lg btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read secondary btn-sm btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
<a class="read secondary btn-md btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
<a class="read secondary btn-lg btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read dark btn-sm btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
<a class="read dark btn-md btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
<a class="read dark btn-lg btn-custom6" title="Blog Details" href="#">Read More
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="52.941" viewBox="0 0 150 52.941">
<path d="M1,45.8H138.89L118.981,64.935l4.473,4.3L151,42.764,123.454,16.293l-4.473,4.3L138.89,39.723H1Z" transform="translate(-1 -16.293)" fill="#1a1a1a"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>