Website in Buttons

Bootstrap is a potent front-end framework used to create modern websites and web apps. It's open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.
*Use Bootstrap 5

Font Awesome is a robust icon set that contains scalable vector icons. And amazingly enough, it is free (icons sets can be quite expensive, making this a pretty sweet deal). There are many important types of icons that come with Font Awesome: social media, UI/web-related, and more!
*Use Font Awesome

Design #1

Button

<== HTML ==>
<a href="#" class="thebtn">
   Button
   <span></span>
</a>
	

	
<== CSS ==>
<style>

.thebtn{
   position: relative;
   display: inline-block;
   color: black;
   background-color: transparent;
   font-weight: 500;
   text-decoration: none !important;
   white-space: nowrap;
   border: 2px solid black;
   border-radius: 2px;
   padding: 4px 20px;
   transition: .3s;
}

.thebtn span{
   position: absolute;
   top: 100%;
   left: -1px;
   right: -1px;
   bottom: -1px;
   z-index: -1;
   color: white;
   background-color: black;
   transition: .3s;
}

.thebtn:hover{
   color: white !important;
}

.thebtn:hover span{
   top: -1px;
}

</style>

Design #2

Button

<== HTML ==>
<a href="#" class="thebtn">
   Button
</a>
	

	
<== CSS ==>
<style>

.thebtn{
   display: inline-block;
   position: relative;
   color: black;
   background: #eee;
   font-weight: 600;
   text-decoration: none;
   padding: 6px 30px;
   transition: .3s;
}

.thebtn::before{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 15px;
   height: 15px;
   border: 3px solid #fd3f30;
   border-color: #fd3f30 transparent transparent #fd3f30;
   transition: .3s;
}

.thebtn::after{
   content: "";
   position: absolute;
   bottom: 0;
   right: 0;
   width: 15px;
   height: 15px;
   border: 3px solid #fd3f30;
   border-color: transparent #fd3f30 #fd3f30 transparent;
   transition: .3s;
}


.thebtn:hover{
   color: white;
   background: #000;
}

.thebtn:hover::before, .thebtn:hover::after{
   width: 100%;
   height: 100%;
}

</style>

Design #3

Button

<== HTML ==>
<a href="#" class="thebtn">
   Button
</a>
	

	
<== CSS ==>
<style>

.thebtn{
   display: inline-block;
   position: relative;
   color: black;
   background: #ddd;
   font-weight: 600;
   text-decoration: none;
   padding: 6px 30px;
   transition: .3s;
}

.thebtn::before, .thebtn::after{
   content: "";
   position: absolute;
   width: 50%;
   height: 100%;
   transform: skew(-20deg);
   transition: .3s;
   opacity: 0;
   z-index: -1;
}

.thebtn::before{
   top: 0;
   left: 0;
   background: #000;
}

.thebtn::after{
   bottom: 0;
   right: 0;
   background: #fd3f30;
}


.thebtn:hover{
   color: white;
   background: transparent;
   transform: skew(-10deg);
}

.thebtn:hover::before, .thebtn:hover::after{
   opacity: 1;
}

</style>

Design #4

Button

*Use Font Awesome

<== HTML ==>
<a href="#" class="thebtn">
   Button 
   <span><i class="fa fa-angle-double-right"></i></span>
</a>
	

	
<== CSS ==>
<style>

.thebtn{
   display: inline-block;
   position: relative;
   color: white;
   background: #000;
   font-weight: 600;
   text-decoration: none;
   border: 2px solid #fd3f30;
   padding: 6px 40px;
   transition: .3s;
}

.thebtn span{
   position: absolute;
   right: 40px;
   color: #fd3f30;
   opacity: 0;
}

.thebtn:hover{
   color: white;
   padding: 6px 45px 6px 35px;
}

.thebtn:hover span{
   right: 30px;
   opacity: 1;
}

</style>

Design #5

Button

<== HTML ==>
<a href="#" class="thebtn">
   Button
</a>
	

	
<== CSS ==>
<style>

.thebtn {
   display: inline-block;
   position: relative;
   background-color: #000;
   border: none;
   font-size: 20px;
   color: #FFFFFF !important;
   padding: 8px 25px;
   text-align: center;
   transition-duration: 0.8s;
   text-decoration: none;
   overflow: hidden;
   cursor: pointer;
}

.thebtn::after {
   content: "";
   background: #fd3f30;
   display: block;
   position: absolute;
   padding-top: 300%;
   padding-left: 350%;
   margin-left: -30px !important;
   margin-top: -120%;
   opacity: 0;
   transition: all 0.8s
}

.thebtn:active::after {
   padding: 0;
   margin: 0;
   opacity: 1;
   transition: 0s
}

</style>

Design #6

Button

<== HTML ==>
<div class="svg-wrapper">
   <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
      <rect height="40" width="150" id="shape" />
      <div id="text">
         <a href="#">	<< set link
            <span class="spot">Button</span>
         </a>
      </div>
   </svg>
</div>


	
<== CSS ==>
<style>

#personal {
    color: #fd3f30;
    text-decoration: none;
    position: absolute;
    bottom: 15px;
    right: 2%;
}

.spot {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	padding: 6px 0;
}

.svg-wrapper {
    margin-top: 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 40px;
    display: inline-block;
    border-radius: 3px;
    margin: auto;
}

#shape {
    stroke-width: 3px;
    fill: transparent;
    stroke: #fd3f30;
    stroke-dasharray: 50 0;
    stroke-dashoffset: 0;
    transition: 1s all ease;
}

#text {
    margin-top: -35px;
    text-align: center;
}

#text a {
    width: 100%;
    display: block;
    color: #212529;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
}

.svg-wrapper:hover #shape {
    stroke-dasharray: 85 400;
    stroke-width: 6px;
    stroke-dashoffset: -220;
    stroke: #fd3f30;
}

</style>