jp
Eng
It
Buttons
Button Style 1
<section class="buttons-block-area">
<div class="container">
<div class="button-block">
<div class="button1">
<h2>Button Title</h2>
<div class="row">
<div class="col-md-4 col-sm-6 col-12 mb-4">
<button type="button" class="btn btn-primary btn-sm">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_3" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-primary">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_4" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-primary btn-lg">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_5" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
<div class="col-md-4 col-sm-6 col-12 mb-4">
<button type="button" class="btn btn-dark btn-sm">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_6" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-dark">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_7" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-dark btn-lg">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_8" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
<div class="col-md-4 col-sm-6 col-12">
<button type="button" class="btn btn-primary btn-sm">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_9" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-primary">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_10" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-primary btn-lg">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_11" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 2
<section class="buttons-block-area">
<div class="container">
<div class="button-block">
<div class="button2">
<h2>Button Title</h2>
<div class="row">
<div class="col-md-4 col-sm-6 col-12 mb-4">
<button type="button" class="btn btn-primary btn-sm rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_12" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-primary rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_13" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-primary btn-lg rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_14" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
<div class="col-md-4 col-sm-6 col-12 mb-4">
<button type="button" class="btn btn-dark btn-sm rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_15" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-dark rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_16" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-dark btn-lg rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_17" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
<div class="col-md-4 col-sm-6 col-12">
<button type="button" class="btn btn-primary btn-sm rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_18" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-primary rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_19" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-primary btn-lg rounded-pill">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_20" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
Button Style 3
<section class="buttons-block-area">
<div class="container">
<div class="button-block">
<div class="button3">
<h2>Button Title</h2>
<div class="row">
<div class="col-md-4 col-sm-6 col-12 mb-4">
<button type="button" class="btn btn-outline-primary btn-sm">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_21" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-outline-primary">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_22" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-outline-primary btn-lg">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_23" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
<div class="col-md-4 col-sm-6 col-12 mb-4">
<button type="button" class="btn btn-outline-dark btn-sm">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_24" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-outline-dark">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_25" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-outline-dark btn-lg">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_26" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
<div class="col-md-4 col-sm-6 col-12">
<button type="button" class="btn btn-outline-primary btn-sm">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_27" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-outline-primary">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_28" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
<button type="button" class="btn btn-outline-primary btn-lg">Button
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="10" viewBox="0 0 28 10">
<path id="Path_29" data-name="Path 4" d="M109.754,179.349h25.8l-3.667-3.641a.489.489,0,0,1,0-.7.5.5,0,0,1,.7,0l4.459,4.427a.489.489,0,0,1,.21.4s0,0,0,.007,0,.011,0,.016a.492.492,0,0,1-.1.279.493.493,0,0,1-.038.057l-4.557,4.524a.5.5,0,0,1-.7,0,.489.489,0,0,1,0-.7l3.722-3.7H109.754a.492.492,0,1,1,0-.984Z" transform="translate(-109.259 -174.868)" fill="#fff"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>