Aby utworzyć przycisk nawiązujący do klasycznego przycisku “start” z początkowych edycji systemu Windows za pomocą HTML i CSS, potrzebne nam będą następujące składniki:
kliknij aby pobrać
Budowa
HTML
Na początku stwórzmy folder, w którym zgromadzimy wszystkie pliki projektowe.
Do tego folderu powinieneś przenieść lub rozpakować wszystkie pobrane pliki.
Zalecam utworzenie kilku podfolderów dla zachowania porządku, na przykład: folder CSS do przechowywania plików z arkuszami styli, folder IMG do przechowywania obrazów itp.
Następnie w głównym folderze projektu, utwórzmy plik o rozszerzeniu html (np. index.html) i umieśćmy go w głównym folderze projektowym. Kolejnym krokiem będzie zdefiniowanie struktury dokumentu w tym pliku html. Jeżeli korzystasz z Visual Studio Code, możesz to zrobić szybko, wpisując znak wykrzyknika i naciskając klawisz “enter”.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przycisk Windows 95</title>
</head>
<body>
</body>
</html>
Kolejnym krokiem jest utworzenie pliku styli (np. style.css).
Pamiętaj aby dodać w pliku html linkowanie do pliku styli:
<link rel="stylesheet" href="style.css">
Teraz w sekcji body (ciała strony), utwórzmy przycisk. Jest to możliwe do wykonania również w ramach formularza, pod warunkiem że został już wcześniej utworzony. Jednakże, z racji na to, że zamierzam stworzyć tylko jeden przycisk, nie budowałem formularza.
Aby rozróżnić przycisk miedzy innymi elementami formularza (w przypadku gdy w dokumencie znajduje się więcej niż jeden przycisk), nadaj klasę windows na znacznik <button>:
<button class="windows">
</button>
Między znacznikiem otwierającym a zamykającym przycisk, wstawimy pobrane wcześniej zdjęcie oraz napis Start.
<button class="windows">
<img class="icon" src="img/windows95.png" />
<span class="text">Start</span>
</button>
Zwróć uwagę, że nasz obrazek ikonki windows pobieram z podfolderu o nazwie img. Ponadto aby ułatwić sobie formatowanie oraz bardziej zindywidualizować elementy, które chcę formatować, nadałem dodatkowe klasy css na znaczniki img oraz span.
Budowa arkusza
CSS
Nadszedł czas na zaprojektowanie wyglądu naszego przycisku.
Pamiętaj HTML służy do budowania jedynie struktury dokumentu.
Utwórzmy w głównym folderze plik ze stylami, np. style.css. Teraz wystarczy dołączyć go do naszego projektu. Ponownie przechodzimy do pliku index.html.
W sekcji head <head> umieść następujący kod:
<link rel="stylesheet" href="style.css">
Zwróć uwagę na nazwę pliku styli oraz miejsce, w którym go przechowujesz.
Pamiętaj! jeśli znajduje się on w podfolderze, to musisz go dodać do atrybutu href.
W moim przypadku plik styli (style.css) znajduje się w tym samym folderze co plik index.html.
Nasz przycisk teraz powinien wyglądać następująco:
Otwieramy w edytorze plik styli (style.css).
Na początku zmienimy styl czcionki na ten znany z pierwszych wersji Windows. W tym celu definiujemy nowy styl czcionki. Musimy również podać lokalizacje czcionki, którą chcemy wczytać do projektu:
@font-face {
font-family: w95fa;
src: url('font/w95fa.woff');
}
W moim przypadku czcionka znajduje się w folderze font.
Teraz wystarczy w css zdefiniować użycie czcionki w standardowy sposób. Odwołujemy się do selektora klasy z naszego pliku HTML – w moim przypadku windows (jest to nazwa klasy przycisku, który tworzyliśmy w HTML). Następnie wpisujemy właściwość font-family z wartością w95fa:
.windows {
font-family: w95fa;
}
Krój czcionki wyraźnie się zmienił.
Oryginalny przycisk posiada napis pisany wyłącznie wielkimi literami. W takim razie dopiszmy do naszego selektora windows właściwość text-transform z wartością uppercase. Spowoduje to zmianę tekstu wyłącznie na wielkie litery:
.windows {
font-family: w95fa;
text-transform: uppercase;
}
Pozostaje nam zwiększyć napis:
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
}
Oryginalny napis jest również pogrubiony:
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
}
Zajmijmy się wyglądem samego przycisku. Klasyczny przycisk jest “kańciasty”, pozbawiony zaokrągleń. Aby osiągnąć podobny efekt, musimy ustawić zaokrąglenia na 0:
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
border-radius: 0;
}
Dla lepszego efektu zwiększmy trochę przycisk:
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
border-radius: 0;
padding: 10px 20px;
}
Kolejnym krokiem będzie zmiana koloru tła. Dopiszmy właściwość background-color, ustawiając jej właściwość na #beb8bf. Następnie ustawmy bramowanie tak aby przycisk przypominał wyglądem oryginalny. Aby to uzyskać skorzystamy z właściwości border. Dla każdej strony obramowania będziemy ustawiali trochę inne wartości. Całość powinna wyglądać następująco:
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
border-radius: 0;
padding: 10px 20px;
background-color: #beb8bf;
border-top: solid black 2px;
border-left: solid black 2px;
border-bottom: solid 5px black;
border-right: solid 5px black;
}
W celu pogłębienia efektu trójwymiarowego, oryginalny przycisk w niektórych wersjach windows posiadał z lewej strony oraz na górze dodatkowo jasny pasek. Wyglądało to jak wcewnętna część obramowania. Efekt ten otrzymamy stosując ostry cień oraz ustawiając go do wewnątrz przycisku:
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
border-radius: 0;
padding: 10px 20px;
background-color: #beb8bf;
border-top: solid black 2px;
border-left: solid black 2px;
border-bottom: solid 5px black;
border-right: solid 5px black;
box-shadow: 3px 3px 0 0 inset white;
}
Napis “START”, jest za nisko. Wyśrodkujmy go. W tym celu w pliku css odwołamy się do klasy tekstu z przycisku. Sprawdźmy jak w rzeczywistości ta klasa się nazywa. W pliku HTML w strukturze strony w definicji przycisku znajdziemy nazwę tej klasy. W moim przypadku nazywa się ona: text (patrz Budowa HTML).
W pliku style.css, tworzymy selektor klasy, odwołujący się do klasy tekstu na przycisku w pliku HTML:
.text {
}
Wpiszmy właściwość top o wartości 50%:
.text {
top: 50%;
}
Po zapisaniu pliku o otworzeniu go w przeglądarce, widzimy, że nasz napis w ogóle się nie poruszył. Dzieje się tak, gdyż przeglądarka “nie wie” względem czego / jakiego elementu ma poruszyć naszym tekstem. Pamiętaj jeśli nie określimy pozycji elementu jest on traktowany statycznie. Aby naprawić ten problem musimy ustawić pozycjonowania. W naszym przypadku musimy to zrobić w dwóch miejscach. Pierwszy to element rodzica, gdzie ustawimy pozycjonowanie względne – relatywne. W naszym przypadku jest to przycisk czyli button. Drugi element to tekst na przycisku, gdzie ustawimy pozycję absolutną.
Zastanawiasz się pewnie, dlaczego takie działania podejmiemy i dlaczego nie ustawimy przycisku tylko absolutnie. Ok, więc sprawdźmy co się stanie jak tylko przycisk zostanie ustawiony na pozycji absolutnej:
.text {
top: 50%;
position: absolute;
}
efekt:
Jak widzimy tekst zamiast się wyśrodkować jakbyśmy tego oczekiwali, to “uciekł” po za obszar przycisku. Dzieje się to tak dlatego, że tekst pozycjonowany jest względem okna przeglądarki a nie jak oczekujemy, obszaru przycisku.
Wróćmy więc do naszych wcześniejszych postanowień i nadajmy pozycjonowanie dla przycisku:
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
border-radius: 0;
padding: 10px 20px;
background-color: #beb8bf;
border-top: solid black 2px;
border-left: solid black 2px;
border-bottom: solid 5px black;
border-right: solid 5px black;
box-shadow: 3px 3px 0 0 inset white;
position: relative;
}
efekt:
Teraz jest znacznie lepiej. Tekst “wskoczył” w przycisk lecz wymaga trochę poprawek.
Zacznijmy od ustalenia statycznej wielkości przycisku. Myślę, że 190px szerokości na 90px wysokości powinno być OK. Przejdźmy do selektora .windows i dopiszmy te właściwości:
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
border-radius: 0;
padding: 10px 20px;
background-color: #beb8bf;
border-top: solid black 2px;
border-left: solid black 2px;
border-bottom: solid 5px black;
border-right: solid 5px black;
box-shadow: 3px 3px 0 0 inset white;
position: relative;
width: 170px; /* szerokość */
height: 90px; /* wysokość */
}
efekt:
Przycisk uległ powiększeniu ale tekst nadal się “wylewa”. Naprawmy to ustawiając go właściwością transform:
.text {
top: 50%;
position: absolute;
transform: translate(0, -30%);
}
efekt:
Jak widzimy nasz tekst pojawił się na środku przycisku lecz nadal “wychodzi” poza jego obrys. Winna jest temu ikonka, którą musimy przesunąć bardziej w prawo. Stwórzmy, więc selektor klasy wraz z odpowiednimi właściwościami:
.icon {
position: absolute;
transform: translate(-110%, -50%); /* warości translate muszą być inne niż w klasie .windows */
}
efekt:
Teraz wszystko jest jak założyliśmy.
W naszym projekcie brakuje jeszcze efektu wciśnięcia przycisku. Dodajmy tą właściwość. W tym celu powinniśmy zmienić obramowanie oraz cieniowanie przycisku w taki sposób aby uzyskać wizualnie wciśnięcie. Efekt ten będziemy tworzyli z użyciem pseudoelementu active.
.windows:active {
border-top: solid transparent 1px;
border-left: solid transparent 1px;
border-bottom: solid 2px white;
border-right: solid 2px white;
box-shadow: 3px 5px 0 0 inset #787878;
}
Efekt naszej pracy 🙂
Poniżej cały kod:
Plik
HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przycisk Windows 95</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="windows">
<img class="icon" src="img/windows95.png"></span>
<span class="text">Start</span>
</button>
</body>
</html>
Plik
CSS
@font-face {
font-family: w95fa;
src: url('../font/w95fa.woff');
}
.windows {
font-family: w95fa;
text-transform: uppercase;
font-size: 28px;
font-weight: bold;
border-radius: 0;
padding: 10px 20px;
background-color: #beb8bf;
border-top: solid black 2px;
border-left: solid black 2px;
border-bottom: solid 5px black;
border-right: solid 5px black;
box-shadow: 3px 3px 0 0 inset white;
position: relative;
width: 170px;
height: 90px;
}
.text {
top: 50%;
position: absolute;
transform: translate(0, -30%);
}
.icon {
position: absolute;
transform: translate(-110%, -50%);
}
.windows:active {
border-top: solid transparent 1px;
border-left: solid transparent 1px;
border-bottom: solid 2px white;
border-right: solid 2px white;
box-shadow: 3px 5px 0 0 inset #787878;
}