How to make Neumorphism Button for Blogger

How to make Neumorphism Button for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to make Neumorphism Button for Blogger.

Benefits :-

  1. Neumorphism Button Design.
  2. Change those old look buttons with new one that looks awesome.
Let's Start
Neumorphism Button Demo

How to make neumorphism button :-

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

.button {position:center;padding:12px 15px; font-size:14px; border-radius: 5px; box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #ffffff; justify-content: center; cursor: pointer; transition: 0.3s ease; color: #9baacf; background: #E4EBF5; border: 0px;font-family: 'Noto Sans', sans-serif}
.button:hover {color: #6d5dfc}
.button:active {box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #ffffff}
.button .icon {left: -5px !important; position: relative !important}

.drkM .button { background: var(--darkBalt) !important; color: #3e3e3e; box-shadow:inset -2px -2px 5px rgba(0,0,0,.5), inset	3px 3px 5px rgba(255,255,255,.07) }
.drkM .button:hover { box-shadow: -2px -2px 5px rgba(0,0,0,.5), 3px 3px 5px rgba(255,255,255,.07); color: #fff }
.drkM .button:active { box-shadow: -2px -2px 5px rgba(0,0,0,.5), 3px 3px 5px rgba(255,255,255,.07); color: #fff; text-shadow: 0 0 10px, 0 0 20px #219cf3 }
Step 5 :- Replace all the blue background marked parts according to your theme.

Step 6 :- Add this Html code to use the button in your posts or pages

<button class='button'>Neumorphism Button</button>
or
<a class='button' href='#'>Neumorphism Button</a>

Don't forget to replace # with your button url and click save.

Rate this article

Frontend Developer and UX Designer

Post a Comment