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 :-
- Neumorphism Button Design.
- Change those old look buttons with new one that looks awesome.
Let's Start
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.
Post a Comment