Data trecută am stabilit că următorul tutorial va fi despre stilizarea unui buton, ceva nu foarte complicat. Vom începe prin crearea unui document cu extensia .html, în cazul meu, l-am denumit index.html, iar apoi facem şi un document cu extensia .css, spre exemplu style.css.

Continuăm prin scrierea scheletului clasic, însă în plus adăugăm şi calea spre fişierul nostru CSS: <link rel=”stylesheet” href=”style.css”>, unde rel se referă la relaţia dintre documentul curent şi documentul la care trimite link-ul, iar href specifică URL-ul paginii web către care duce link-ul. Observăm că tag-ul link nu se închide şi de asemenea, trebuie să mai ţinem minte şi faptul că vom scrie întotdeauna în head această trimitere către documentul nostru CSS.

Continuăm cu body-ul documentului nostru HTML, unde vom insera un div cu clasa “my-button” (orice denumire vreţi) şi în interiorul div-ului inserăm un anchor link, adică link-ul paginii pe care o vom accesa atunci când apăsăm butonul nostru. Spre deosebire de link-ul inserat mai devreme în head, anchor link-ul acesta are şi tag de închidere. Între link şi tag-ul de închidere vom adăuga textul pe care dorim să îl scriem în buton, exact aşa ca în exemplul dat mai jos:

În documentul nostru cu extensia .css, începem stilizarea. Cum am mai spus şi în articolele trecute, selectăm o clasă prin ., exemplul nostru fiind .my-button {…}. La o primă vedere, observăm că avem unele proprietăţi care nu par greu de înţeles, precum background-color, width şi margin, despre care am vorbit şi data trecută, dar avem şi multe alte proprietăţi care poate au nevoie de puţin mai multă clarificare, cum ar fi:

• justify-content aliniează orizontal elementele din container atunci când acestea nu ocupă tot spaţiul container-ului
• display specifică comportamentul unui element
• border-radius se referă la modul în care sunt rotunjite marginile butonului

Fiecare dintre aceste proprietăţi are diferite valori despre care mă gândesc să scriu pe viitor mai amănunţit. Dar până atunci, puteţi citi mai multe încât să vă faceţi o idee despre ce vorbesc şi pe următorul site: https://www.w3schools.com/css/default.asp

Apoi trecem la stilizarea link-ului. Am importat apoi un tip de font (https://fonts.google.com/), anume Roboto, iar pentru asta trebuie ca mai întâi să inserăm asta la începutul documentului nostru, sub forma:

Ce ne mai rămâne acum de făcut este stilizarea butonul şi link-ului atunci când trecem cursorul pe el, anume hover, cum vedem în următoarele poze Mai important cred eu că este selectorul ::after, un selector care inserează ceva după conţinutul fiecărui element selectat. În cazul nostru, acesta va insera săgetuţa ce apare după textul Go to Google, atunci când trecem cursorul peste buton. În content vom insera codul elementului pe care vrem să îl adăugăm. Pentru asta va trebui să îl căutăm pe Internet, iar un exemplu este următorul site:

https://www.w3schools.com/cssref/css_entities.asp

În cele din urmă, butonul nostru ar trebui să arate cam aşa:

Iar atunci când trecem cursorul desupra lui, ar trebui să arate aşa: