Eng
Jap
Button Style 1
<section class="buttons elements">
<div class="container">
<div class="buttons-block">
<h2>Button Style 1</h2>
<div class="buttons1">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-primary btn-sm btn-custom">Button
</a>
<a title="Button-medium" href="#" class="btn btn-primary btn-md btn-custom">Button
</a>
<a title="Button-large" href="#" class="btn btn-primary btn-lg btn-custom">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-custom">Button
</a>
<a title="Button-medium" href="#" class="btn btn-secondary btn-md btn-custom">Button
</a>
<a title="Button-large" href="#" class="btn btn-secondary btn-lg btn-custom">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-custom">Button
</a>
<a title="Button-medium" href="#" class="btn btn-dark btn-md btn-custom">Button
</a>
<a title="Button-large" href="#" class="btn btn-dark btn-lg btn-custom">Button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 2
<section class="buttons elements">
<div class="container">
<div class="buttons-block">
<h2>Button Style 3</h2>
<div class="buttons3">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="button-block">
<a title="Button-small" href="#" class="btn btn-primary btn-sm btn-custom btn-br1">Button
</a>
<a title="Button-medium" href="#" class="btn btn-primary btn-md btn-custom btn-br1">Button
</a>
<a title="Button-large" href="#" class="btn btn-primary btn-lg btn-custom btn-br1">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-custom btn-br1">Button
</a>
<a title="Button-medium" href="#" class="btn btn-secondary btn-md btn-custom btn-br1">Button
</a>
<a title="Button-large" href="#" class="btn btn-secondary btn-lg btn-custom btn-br1">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-custom btn-br1">Button
</a>
<a title="Button-medium" href="#" class="btn btn-dark btn-md btn-custom btn-br1">Button
</a>
<a title="Button-large" href="#" class="btn btn-dark btn-lg btn-custom btn-br1">Button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 3
<section class="buttons elements">
<div class="container">
<div class="buttons-block">
<h2>Button Style 2</h2>
<div class="buttons2">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="button-block1">
<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-block1">
<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-block1">
<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 4
<section class="buttons elements">
<div class="container">
<div class="buttons-block">
<h2>Button Style 4</h2>
<div class="buttons4">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="button-block">
<div class="read btn-sm btn-custom1 btn-primary">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
<div class="read btn-md btn-custom1 btn-primary">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
<div class="read btn-lg btn-custom1 btn-primary">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block">
<div class="read btn-sm btn-custom1 btn-secondary">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
<div class="read btn-md btn-custom1 btn-secondary">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
<div class="read btn-lg btn-custom1 btn-secondary">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block">
<div class="read btn-sm btn-custom1 btn-dark ">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
<div class="read btn-md btn-custom1 btn-dark ">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
<div class="read btn-lg btn-custom1 btn-dark ">
<a href="javascript:void(0)">
Button<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<path data-name="Union 109" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(150 150) rotate(180)" fill="#1a1725"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 5
<section class="buttons elements">
<div class="container">
<div class="buttons-block">
<h2>Button Style 5</h2>
<div class="buttons5">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read-sm primary btn-custom2" title="Blog Details" href="#">Read More
</a>
<a class="read-md primary btn-custom2" title="Blog Details" href="#">Read More
</a>
<a class="read-lg primary btn-custom2" title="Blog Details" href="#">Read More
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read-sm secondary btn-custom2" title="Blog Details" href="#">Read More
</a>
<a class="read-md secondary btn-custom2" title="Blog Details" href="#">Read More
</a>
<a class="read-lg secondary btn-custom2" title="Blog Details" href="#">Read More
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="button-block2">
<a class="read-sm dark btn-custom2" title="Blog Details" href="#">Read More
</a>
<a class="read-md dark btn-custom2" title="Blog Details" href="#">Read More
</a>
<a class="read-lg dark btn-custom2" title="Blog Details" href="#">Read More
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>