Jak dodać przyciski 3D CSS w Weebly?

W naszym poprzednim artykule widzieliśmy, jak dodać i dostosować domyślny element przycisku Weebly. Chociaż istnieje możliwość modyfikowania przycisków, edytowanie istniejącego stylu przycisku jest skomplikowanym zadaniem i często nie działa zgodnie z oczekiwaniami. Prostym rozwiązaniem jest osadzenie własnego niestandardowego kodu CSS/HTML za pomocą elementu kodu osadzania Weebly. Podczas osadzania nie otrzymasz opcji dostosowywania, jednak możesz łatwo stworzyć atrakcyjne przyciski z efektami CSS. Tutaj wyjaśniamy, jak dodać przyciski 3D CSS w witrynie Weebly.

Przyciski 3D CSS

Poniżej przedstawiamy, jak będą wyglądały przyciski 3D.

Przyciski mają następujące cechy:

• Nie są wymagane żadne obrazy, co poprawia szybkość ładowania witryny i wysiłek poświęcony na tworzenie obrazów.
• Kolory i style można łatwo dostosować do dowolnego rodzaju motywu i układu.
• Możesz kontrolować liczbę przycisków w HTML za pomocą elementu embed code. Oznacza to, że możesz umieścić różną liczbę przycisków na różnych stronach, zachowując ten sam źródłowy CSS.
• Każdy przycisk może być powiązany z jedną lub wszystkimi stronami w Twojej witrynie.

Jak dodać przyciski 3D CSS w Weebly?

Wyjaśnimy tutaj, jak dodać 5 przycisków z powyższym stylem 3D. Możesz usunąć lub dodać CSS i odpowiedni kod HTML, aby dodać lub usunąć przyciski oraz zmienić kolor i style.

Krok #1 – Dodawanie przycisku CSS

Pierwszym krokiem jest podjęcie decyzji, czy chcesz dodać przyciski tylko na kilku, czy na wielu stronach Twojej witryny. Jeśli chcesz dodać kilka stron, dodaj kod CSS tylko do tych stron w sekcji „Strony > Wybierz stronę > Ustawienia SEO > Kod nagłówka", jak pokazano poniżej:

Dodaj kod nagłówka na stronie

Jeśli chcesz dodać przyciski na wielu stronach, zaleca się dodanie stylów CSS w zewnętrznym arkuszu stylów i link do strony. Weebly domyślnie ma tylko jeden zewnętrzny arkusz stylów na witrynę. Przejdź do sekcji „Motyw > Edytuj HTML / CSS > Style > main.less”. Znajdź plik i dodaj kod na dole innych istniejących kodów. Zapisz zmiany i wyjdź z edytora kodu.

Edycja głównego pliku CSS w Weebly

Korzystając z edytora kodu, musisz zapisać motyw pod niestandardową nazwą. Jeśli nie chcesz edytować motywu, przejdź do sekcji „Ustawienia > SEO > Kod nagłówka”. Tutaj możesz dodać kod CSS, który zostanie zastosowany do wszystkich stron w Twojej witrynie (podobnie jak w przypadku edycji pliku main.less).

Dodaj kod nagłówka na poziomie witryny Weebly

Oto kod CSS przycisków 3D:

<style type="text/CSS">
a.css3dbutton {
background: #c1e75c;
color: black;
text-decoration: none;
font: bold 18px Arial;
position: relative;
display: inline-block;
margin-right: 15px; 
padding: 15px; 
border-radius: 85px; 
width: 85px; 
height: 85px;
outline: none;
box-shadow: 0 8px 0 #8dab3b,
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton span.outer{ 
text-align: center;
width: 100%;
display: block;
position: relative;
top: 50%; 
-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%); 
}
a.css3dbutton span.outer span.top{ 
display: block;
padding-bottom: 4px;
}
a.css3dbutton span.outer span.bottom{ 
border-top: 1px solid black;
padding-top: 4px;
display: block;
text-transform: uppercase;
line-height: 12px;
font-size: 60%;
}
a.css3dbutton:hover {
background: #9cc62b; 
box-shadow: none;
-ms-transform: translateY(8px); 
-webkit-transform: translate3D(0, 8px, 0);
-moz-transform: translateY(8px);
transform: translate3D(0, 8px, 0);
}
a.css3dbutton.blue{
background: #a6e9f7;
box-shadow: 0 8px 0 #529dad, 
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.blue:hover {
background: #66cbe1; 
box-shadow: none;
}
a.css3dbutton.pink{
background: #fbbaba;
box-shadow: 0 8px 0 #d74848, 
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.pink:hover {
background: #ea6161; 
box-shadow: none;
}
a.css3dbutton.yellow{
background: #f3fa86;
box-shadow: 0 8px 0 #dbcd2f, 
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.yellow:hover {
background: #ecd347; 
box-shadow: none;
}
a.css3dbutton.brown{
background: #e0c87e;
box-shadow: 0 8px 0 #b3805b, 
0 0 3px rgba(0,0,0, 0.2),
0 20px 20px #eee;
}
a.css3dbutton.brown:hover {
background: #b3805b; 
box-shadow: none;
}
</style>

Dowiedz się więcej o tym, jak edytować źródłowy CSS/HTML w Weebly.

Krok #2 – Dodanie kodu HTML

Przeciągnij i upuść element kodu do osadzenia na stronie, na której chcesz dodać przyciski, i wklej do środka poniższy kod. Nie zapomnij zastąpić # własnymi linkami.

<div>
<a href="#" class="css3dbutton">
<span class="outer">
<span class="top">Register </span>
<span class="bottom">Register here free</span>
</span>
</a>
<a href="#" class="css3dbutton blue">
<span class="outer">
<span class="top">Login</span>
<span class="bottom">Login to access</span>
</span>
</a>
<a href="#" class="css3dbutton pink">
<span class="outer">
<span class="top">Sign Up</span>
<span class="bottom">Sign up for free</span>
</span>
</a>
<a href="#" class="css3dbutton yellow">
<span class="outer">
<span class="top">Blog</span>
<span class="bottom">Subscribe to blog</span>
</span>
</a>
<a href="#" class="css3dbutton brown">
<span class="outer">
<span class="top">Forum</span>
<span class="bottom">Read forum posts</span>
</span>
</a>
</div>

Krok #3 – Dostosowywanie przycisków

Istnieją nieskończone możliwości dostosowywania przycisków do potrzeb. Oto kilka ogólnych scenariuszy, których możesz szukać.

Dodawanie lub usuwanie przycisków

Załóżmy, że potrzebujesz tylko 3 przycisków zamiast 5, jak pokazano w przykładzie. W takim przypadku możesz usunąć kod 4 i 5 przycisku zarówno z CSS, jak i HTML. Zalecamy jednak dodanie maksymalnej liczby stylów w CSS, a następnie kontrolowanie liczby przycisków w HTML. W tym scenariuszu, w którym potrzebujesz tylko 3 przycisków, pozostaw kod CSS bez zmian, który ma 5 różnych zdefiniowanych stylów i dodaj kod HTML tylko dla 3 przycisków.

W ten sposób możesz dodać 3 przyciski na jednej stronie, 5 przycisków na innej stronie i tak dalej.

Dostosowywanie kolorów i rozmiaru

• Możesz zmienić kolor tekstu i kolor atrybutów przycisku, takich jak tło i cień.
• Zmień atrybuty szerokości i wysokości, aby zmienić okrągły przycisk na owalny lub inne proporcje.

Pamiętaj, że możesz użyć elementu dystansowego, aby dodać wystarczająco dużo miejsca nad i pod przyciskami. Podobnie możesz umieścić przycisk po prawej lub lewej stronie dowolnego innego elementu za pomocą odstępnika.