ეს მაგალითი იყენებს მხოლოდ გენერატორის კონტროლებს. ზემოთ მოცემული სურათები აჩვენებს რეალურად ჩამოტვირთულ სტილების ფაილებს, რომლებიც გამოყენებულია ჩვეულებრივ HTML ღილაკებზე და არა რედაქტორის ეკრანის ანაბეჭდებს.
გახსენით CSS ღილაკების გენერატორი
დაიწყეთ Signature-ით
გახსენით CSS ღილაკების გენერატორი. პრესეტებში აირჩიეთ Signature Everyday კოლექციიდან. დააყენეთ ღილაკის ტექსტი როგორც „Get started“. კოდის არეში დააყენეთ კლასის სახელი როგორც cta-button.
პრესეტი ცვლის ნაგულისხმევ და კურსორის მიტანის სტილებს, ხოლო თქვენი წარწერა და კლასის სახელი უცვლელი რჩება. აირჩიეთ საწყისი წერტილი დეტალური კორექტირების დაწყებამდე.
კლასის სახელი აკავშირებს CSS წესებს თქვენს HTML ღილაკთან. გენერატორი წმენდს არასაჭირო სიმბოლოებს; გამოიყენეთ მოკლე, გამორჩეული სახელი, რათა თავიდან აიცილოთ სხვა ელემენტების სტილიზაცია.
გრადიენტული მომრგვალებული ღილაკის შექმნა
დატოვეთ რედაქტირების მდგომარეობა Default-ზე. ტექსტში აირჩიეთ System sans, შრიფტის ზომა 18 px და სისქე Bold. შეინარჩუნეთ თეთრი ტექსტის ფერი, ნორმალური სტილი, ცენტრში გასწორება და ხაზის სიმაღლე 1.4.
Fill-ში აირჩიეთ Linear gradient. გამოიყენეთ ქვემოთ მოცემული ორი ფერი და კუთხე. დააყენეთ ჰორიზონტალური დაშორება 32 px-ზე და ვერტიკალური დაშორება 16 px-ზე. Shape-ში დატოვეთ Link all corners ჩართული და დააყენეთ Corner radius 100 px-ზე. საზღვრის სისქე რჩება 0 px.
Shadow-ში დატოვეთ Box shadow ჩართული. გამოიყენეთ ჰორიზონტალური წანაცვლება 0 px, ვერტიკალური წანაცვლება 8 px, ბუნდოვანება 24 px, გაშლა −4 px, ფერი #460BD8 და გაუმჭვირვალობა 32%. დატოვეთ Inset shadow და Text shadow გამორთული.
დაშორება ცვლის ტექსტის გარშემო არსებულ სივრცეს. კუთხის რადიუსი ცვლის კონტურს. დიდი რადიუსი ქმნის ამ მომრგვალებულ ფორმას წარწერის გაფართოების გარეშე.
მიანიჭეთ კურსორის მიტანის ეფექტს საკუთარი სტილი
გადართეთ რედაქტირების მდგომარეობა Hover-ზე. Fill-ში შეცვალეთ ფონის ფერი #33099E-ზე და მეორე ფერი #6D20BF-ზე. შეინარჩუნეთ გრადიენტის კუთხე 135°-ზე. Shadow-ში შეცვალეთ ვერტიკალური წანაცვლება 10 px-ზე და ბუნდოვანება 28 px-ზე. დანარჩენი პარამეტრები დატოვეთ უცვლელი.
გამოიყენეთ ტილოს Default, Hover და Active ღილაკები თითოეული მდგომარეობის შესამოწმებლად. ასევე შეგიძლიათ მიიტანოთ კურსორი ან დააჭიროთ გადახედვის ღილაკს. შეცვალეთ ტილოს ფონი ღიადან მუქზე, რათა შეამოწმოთ მისი კიდეები და ჩრდილი.
რედაქტირების მდგომარეობა ირჩევს, თუ რომელ სტილებს ცვლით. ტილოს მდგომარეობა ცვლის მხოლოდ იმას, რასაც უყურებთ. დაუბრუნდით Default რედაქტირებას საბაზისო გარეგნობის დარეგულირებამდე.
კურსორის მიტანის თვისებები, რომლებიც კვლავ ემთხვევა ნაგულისხმევს, მიჰყვება შემდგომ ნაგულისხმევ რედაქტირებებს. მას შემდეგ, რაც დააკონფიგურირებთ კურსორის მიტანის თვისებას, ის დამოუკიდებელი ხდება. ხელახლა შეამოწმეთ ორივე მდგომარეობა საბაზისო სტილის შეცვლის შემდეგ.
ექსპორტი და ტესტირება თქვენს გვერდზე
აირჩიეთ CSS ჩანართი და გამოიყენეთ Copy CSS, ან აირჩიეთ Download, რათა შეინახოთ cta-button.css. აირჩიეთ HTML ჩანართი და დააკოპირეთ შესაბამისი ღილაკის მარკირება. HTML მოიცავს იმავე კლასის სახელს და ღილაკს type="button"-ით.
დაამატეთ CSS თქვენს სტილების ფაილში, ან დააკავშირეთ ჩამოტვირთული ფაილი თქვენი გვერდიდან. განათავსეთ HTML იქ, სადაც ღილაკი უნდა იყოს. ორივე ექსპორტი ერთად მუშაობს: HTML ღილაკი თავისთავად არ მოიცავს მის სტილიზაციას.
გახსენით გვერდი და შეამოწმეთ მისი ნაგულისხმევი, კურსორის მიტანის, კლავიატურით ფოკუსირებისა და დაჭერის მდგომარეობები. ექსპორტი მოიცავს focus-visible კონტურს, მცირე აქტიურ მოძრაობას და მოძრაობის შემცირების წესს. თქვენს მიმდებარე სტილებს და დაინსტალირებულ შრიფტებს კვლავ შეუძლიათ გავლენა მოახდინონ შედეგზე.
გენერირებული ღილაკი არის სტილიზებული კონტროლი. დააკავშირეთ მისი დაწკაპუნების ქცევა თქვენს პროექტში; გამოიყენეთ სწორი ღილაკის ტიპი ფორმაში დამატებისას.
cta-button.css
ჩამოტვირთული ფაილის სახელი შეესაბამება კლასის სახელს.
ხშირად დასმული კითხვები
მჭირდება თუ არა CSS ფრეიმვორკი?
არა. გამომავალი არის სტანდარტული CSS პლუს ჩვეულებრივი HTML ღილაკი. ჩასვით CSS თქვენს სტილების ფაილში და გამოიყენეთ შესაბამისი კლასი ღილაკზე.
ინახავს თუ არა Download HTML-საც?
Download ინახავს .css ფაილს, რომელსაც კლასის სახელი ჰქვია. დააკოპირეთ ღილაკის მარკირება ცალკე HTML ჩანართიდან.
შემიძლია თუ არა თითოეულ კუთხეს განსხვავებული რადიუსი მივანიჭო?
დიახ. Shape-ში გამორთეთ Link all corners, შემდეგ დააყენეთ Top left, Top right, Bottom right და Bottom left დამოუკიდებლად. ეს მაგალითი ინარჩუნებს მათ დაკავშირებულს მომრგვალებული ფორმისთვის.
დარჩება თუ არა ჩემი დიზაინი შემდეგ ჯერზე?
სტუდია ცდილობს შეინახოს მიმდინარე მონახაზი ამ ბრაუზერის ლოკალურ მეხსიერებაში. ეს არ არის ანგარიში ან მოწყობილობებს შორის სარეზერვო ასლი. ბრაუზერის პარამეტრებმა, საიტის მონაცემების გასუფთავებამ ან გადატვირთვამ (Reset) შეიძლება წაშალოს ან შეცვალოს იგი, ამიტომ შეინახეთ (export) ის სამუშაო, რომლის შენარჩუნებაც გსურთ.
იგზავნება თუ არა ჩემი ღილაკი სერვერზე?
სტილის გადახედვა და CSS/HTML გენერაცია ხდება თქვენს ბრაუზერში. რედაქტორი არ ტვირთავს თქვენი ღილაკის ტექსტს ან სტილის მონახაზს ექსპორტის შესაქმნელად.
მიანიჭეთ თქვენს შემდეგ ღილაკს საკუთარი სტილი.
აირჩიეთ საწყისი წერტილი, დაარეგულირეთ დეტალები და გადაიტანეთ კოდი თქვენს პროექტში.