2 Step Stylish HTML CSS button

Hello Readers Today we are going to discuss about How to 2 Step Stylish HTML CSS button.

Also Read :Best No.1 : URL Shortener on Blogger

DEMO 2 Step Stylish HTML CSS button

Also Read :Best No.1 : Blogger On-Page SEO Code

HTML Code

<button class="button-89" role="button">Button 89</button>{codebox}

CSS Code

<script>

/* CSS */

.button-89 {

  --b: 3px;   /* border thickness */

  --s: .45em; /* size of the corner */

  --color: #373B44;

  

  padding: calc(.5em + var(--s)) calc(.9em + var(--s));

  color: var(--color);

  --_p: var(--s);

  background:

    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)

    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));

  transition: .3s linear, color 0s, background-color 0s;

  outline: var(--b) solid #0000;

  outline-offset: .6em;

  font-size: 16px;

Also Read :Implementing Anti-Adblock Scripts in Blogger

  border: 0;

  user-select: none;

  -webkit-user-select: none;

  touch-action: manipulation;

}

Also Read :Best No.1 : Twitter Card Meta Tags for Blogger

.button-89:hover,

.button-89:focus-visible{

  --_p: 0px;

  outline-color: var(--color);

  outline-offset: .05em;

}

.button-89:active {

  background: var(--color);

  color: #fff;

}

</script>{codebox}